[单曲音乐] 茉

马黑黑 · 发表于 2024-9-30 07:54

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-9-30 08:17 编辑

马黑黑 · 发表于 2024-9-30 07:55

本帖最后由马黑黑于 2024-9-30 08:16 编辑

帖子代码

<style>
#dbox {
	margin: 30px 0 30px calc(50% - 593px);
	width: 1024px;
	height: 640px;
	background: url('https://638183.freep.cn/638183/t24/4/mo.jpg') no-repeat center/cover;
	box-shadow: 4px 4px 16px #00000080;
	z-index: 1;
	position: relative;
}
#player {
	position: absolute;
	width: 200px;
	height: 200px;
	left: calc(50% - 100px);
	top: calc(50% - 150px);
	cursor: pointer;
	display: grid;
	place-items: center;
	filter: drop-shadow(1px 1px 0 #000);
	animation: rot linear 10s infinite var(--state);
}
#player::before {
	position: absolute;
	content: '';
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: plum;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="dbox">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1387600520" autoplay loop></audio>
	<svg id="bsvg" width="1024" height="640">
		<rect x="0" y="0" width="100%" height="100%" rx="8" ry="5" fill="none" stroke="snow" stroke-width="8" stroke-dasharray="8 4">
			<animate attributeName="stroke-dashoffset" from="0" to="-48" dur="2s" begin="0s" repeatCount="indefinite"/>
		</rect>
	</svg>
	<div id="player"></div>
</div>

<script>
mState = () => {
	dbox.style.setProperty('--state', aud.paused ? 'paused' : 'running');
	aud.paused ? bsvg.pauseAnimations() : bsvg.unpauseAnimations();
	player.title = aud.paused ? '点击播放' : '点击暂停';
}
mkParticles = (circles, columns, target) => {
	varsize = Math.floor(target.clientWidth / 2 / circles - 10);
	for(var i = 0; i < circles; i ++) {
		vardistance = i * (size + 5) + size + 10;
		for(var k = 0; k < columns; k ++) {
			var angle =  360 / columns * k;
			var span = document.createElement('span');
			span.style.cssText += `
				position: absolute;
				width: ${size}px;
				height: ${size}px;
				background: #${Math.random().toString(16).substring(2,8)};
				border-radius: 100% 80%;
				transform: rotate(${angle}deg) translate(${distance}px);
			`;
			target.appendChild(span);
		}
	}
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
mkParticles(4,9,player);
</script>

梦江南 · 发表于 2024-9-30 08:01

黑黑老师早！老师的这个播放器不但漂亮还能控制边框的粒子。真神奇！

马黑黑 · 发表于 2024-9-30 08:04

本帖：

（一）小播有CSS+HTML做成，小播粒子由JS函数 mkParticle(圈数, 列数, 父元素) 生成，71行调用函数，在 id="player" 的父元素内生成4圈9列的例子。粒子样式修改：粒子形状62行，粒子颜色61行。粒子父元素应设计为约束子元素绝对居中（18、19行），其宽高尺寸一致，父元素的宽高和粒子的圈数决定粒子的大小；

（二）帖子流动边框使用 svg 实现，借助 stroke-dasharray + stroke-dashoffset 做成的效果。其中，为使得流动过渡平滑，from 和 to 的值中，不为 0 的属性值应设置得当（一般为 dasharray 头一个数的倍数，可以观察效果后修正）。