论坛 › 马黑黑教程专版 › 圆盘播放器

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

圆盘播放器

本帖最后由 马黑黑 于 2023-4-9 08:54 编辑 <br /><br /><style>
#papa {
        position: relative;
        min-height: 400px;
}
#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>

马黑黑 发表于 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>

红影 发表于 2023-4-9 08:49

这个一边转动一边变色，好漂亮{:4_199:}

红影 发表于 2023-4-9 08:51

各层转动速度还是不一样的呢，音乐和转速很协调。看这个这个转动的圆盘听着音乐，感觉真好{:4_431:}

红影 发表于 2023-4-9 08:52

黑黑又带来漂亮的新效果{:4_187:}

马黑黑 发表于 2023-4-9 08:57

红影 发表于 2023-4-9 08:49
这个一边转动一边变色，好漂亮

用边框的 dotted 风格样式的话立体感很强，但是样子怪怪的，最好不允许重叠

马黑黑 发表于 2023-4-9 08:57

红影 发表于 2023-4-9 08:51
各层转动速度还是不一样的呢，音乐和转速很协调。看这个这个转动的圆盘听着音乐，感觉真好

音乐确实不错

马黑黑 发表于 2023-4-9 08:57

红影 发表于 2023-4-9 08:52
黑黑又带来漂亮的新效果

这个可以考虑用用？

梦缘 发表于 2023-4-9 09:43

很有特色的播放器，感谢分享，欣赏问好！{:4_187:}

马黑黑 发表于 2023-4-9 09:44

梦缘 发表于 2023-4-9 09:43
很有特色的播放器，感谢分享，欣赏问好！

周末好

梦油 发表于 2023-4-9 10:31

这变幻无穷的色彩和不断的旋转更增加了圆盘播放器的魅力啦。

马黑黑 发表于 2023-4-9 10:31

梦油 发表于 2023-4-9 10:31
这变幻无穷的色彩和不断的旋转更增加了圆盘播放器的魅力啦。

看着新鲜吧

梦油 发表于 2023-4-9 10:36

马黑黑 发表于 2023-4-9 10:31
看着新鲜吧

是的，很有新意。

马黑黑 发表于 2023-4-9 10:37

梦油 发表于 2023-4-9 10:36
是的，很有新意。

也顺眼

亦是金 发表于 2023-4-9 11:33

新播放器漂亮！学习了，准备用用！{:4_191:}

红影 发表于 2023-4-9 12:01

马黑黑 发表于 2023-4-9 08:57
用边框的 dotted 风格样式的话立体感很强，但是样子怪怪的，最好不允许重叠

不怪啊，也许用在帖子里会很漂亮呢{:4_187:}

红影 发表于 2023-4-9 12:02

马黑黑 发表于 2023-4-9 08:57
音乐确实不错

嗯嗯，非常轻松悠然。

红影 发表于 2023-4-9 12:03

马黑黑 发表于 2023-4-9 08:57
这个可以考虑用用？

当然可以啊，应该会很漂亮{:4_187:}

马黑黑 发表于 2023-4-9 12:04

红影 发表于 2023-4-9 12:03
当然可以啊，应该会很漂亮

是很漂亮，我忍不住做了一个：

http://mahei.freeee.ml/art/bshow.php?st=3&sd=3&art=mahei_1681012985

查看完整版本: 圆盘播放器