圆盘播放器

马黑黑 · 发表于 2023-4-9 08:22

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

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

x

本帖最后由马黑黑于 2023-4-9 08:54 编辑

马黑黑 · 发表于 2023-4-9 08:23

代码：

<style>
#papa {
position: relative;
}
#wrap {
position: absolute;
left: 100px;
top: 30px;
width: 200px;
height: 200px;
display: grid;
place-items: center;
cursor: pointer;
animation: hue 10s infinite alternate var(--state);
}
#wrap > span {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
border: 8px dashed black;
transform: rotate(var(--deg));
animation: rot var(--time) infinite linear var(--state);
}
@keyframes rot {
from { transform: rotate(var(--deg)); }
to { transform: rotate(calc(var(--deg) + 360deg)); }
}
@keyframes hue {
to { filter: hue-rotate(360deg); }
}
</style>
<div id="papa">
<div id="wrap" title="播放/暂停"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1440252336" loop="loop"></audio>
</div>
<script>
Array.from({length:10}).forEach((item,key) => {
let sp = document.createElement('span');
sp.style.cssText += `
--deg: ${Math.random()*(key+10)}deg;
--time: ${Math.random()*10+10}s;
width: ${key*18}px;
height: ${key*18}px;
border-color: hsla(${Math.ceil(Math.random()*360)},70%,50%,.75);
border-width: ${key+6}px;
`;
wrap.appendChild(sp);
});
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
wrap.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

复制代码

#papa选择器请自行完善

马黑黑 · 发表于 2023-4-9 08:34

本帖最后由马黑黑于 2023-4-9 08:41 编辑

需要圆点的请修改 21 行，将 dashed 改为 dotted；

需要各层 span 彼此隔开的，删掉 48 行；

需要设定 span 的色系范围的，修改 47 行。该句代码如下：

border-color: hsla(${Math.ceil(Math.random()*360)},70%,50%,.75);

使用的是 hsla 颜色系统，可以替换成其他的颜色表达方式，如果愿意使用hsla，请理解hsla四个参数的含义与规范：第一个是色相h，原句中随机在 0-360 当中随机获取，可以修改范围；第二个参数是饱和度s，值在 0%-100%之间，0%是全黑，100%是颜色最饱满的状态；第三个参数是亮度l，值也在0%-100%之间，0%为不亮（全黑），100%为最亮（全白）；第四个参数是不透明度，值在0-1之间，0表示完全透明，1表示完全不透明；

需要自动播放的，请修改HTML代码中的audio标签，加入红色部分：

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1440252336" loop="loop" autoplay="autoplay"></audio>