论坛 › 马黑黑教程专版 › 长得周正的圈圈频谱

马黑黑 发表于 2023-7-18 21:14

长得周正的圈圈频谱

<style>
#mydiv { margin: 20px auto; width: 600px; height: 400px; background: #333; display: grid; place-items: center; position: relative; --state: paused; }
#ppwrap { position: absolute; bottom: 60px; width: 80px; height: 80px; cursor: pointer; animation: rot 6s infinite linear var(--state); --deg: 360deg; }
#ppwrap::before { display: grid; place-items: center; position: absolute; content: attr(data-tt); width: 100%; height: 100%; white-space: pre; font: normal 14px sans-serif; color: tan; animation: rot 6s infinite linear var(--state); --deg: -360deg; }
.pinpu { display: grid; place-items: center end; position: absolute; right: calc(50% + 2px); top: calc(50% - 2px); width: 10px; height: 4px; transform-origin: 100% 100%; animation: ppgo var(--du) var(--dl) infinite alternate var(--state); }
.pinpu::after { content:''; position: absolute; width: 4px; height: 4px; background: snow; border-radius: 50%; }
@keyframes ppgo { from { width: 0px; } to { width: 50px; } }
@keyframes rot { to { transform: rotate(var(--deg)); } }
</style>

<div id="mydiv">
    <div id="ppwrap" data-tt="00:00
00:00"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2049568509" autoplay loop></audio>

<script>
let ppnum = 50;
(function(){
    !function(){ Array.from({length: ppnum}).forEach((item,key) => { item = document.createElement('span'); item.className = 'pinpu'; item.style.cssText += `background: #${Math.random().toString(16).substr(-6)}; transform: rotate(${360 / ppnum * key}deg) translate(-40px); --du: ${.2 + Math.random() * .2}s; --dl: -${Math.random()}s; `; ppwrap.appendChild(item); }); }();
    let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    let toMin = (val)=> {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;}
    aud.addEventListener('pause', mState, false);
    aud.addEventListener('play', mState, false);
    aud.addEventListener('timeupdate', () => ppwrap.dataset.tt = toMin(aud.currentTime) + '\n' + toMin(aud.duration));
    ppwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2023-7-18 21:14

代码分享
<style>
#mydiv { margin: 20px auto; width: 600px; height: 400px; background: #333; display: grid; place-items: center; position: relative; --state: paused; }
#ppwrap { position: absolute; bottom: 60px; width: 80px; height: 80px; cursor: pointer; animation: rot 6s infinite linear var(--state); --deg: 360deg; }
#ppwrap::before { display: grid; place-items: center; position: absolute; content: attr(data-tt); width: 100%; height: 100%; white-space: pre; font: normal 14px sans-serif; color: tan; animation: rot 6s infinite linear var(--state); --deg: -360deg; }
.pinpu { display: grid; place-items: center end; position: absolute; right: calc(50% + 2px); top: calc(50% - 2px); width: 10px; height: 4px; transform-origin: 100% 100%; animation: ppgo var(--du) var(--dl) infinite alternate var(--state); }
.pinpu::after { content:''; position: absolute; width: 4px; height: 4px; background: snow; border-radius: 50%; }
@keyframes ppgo { from { width: 0px; } to { width: 50px; } }
@keyframes rot { to { transform: rotate(var(--deg)); } }
</style>

<div id="mydiv">
    <div id="ppwrap" data-tt="00:00
00:00"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2049568509" autoplay loop></audio>

<script>
let ppnum = 50;
(function(){
    !function(){ Array.from({length: ppnum}).forEach((item,key) => { item = document.createElement('span'); item.className = 'pinpu'; item.style.cssText += `background: #${Math.random().toString(16).substr(-6)}; transform: rotate(${360 / ppnum * key}deg) translate(-40px); --du: ${.2 + Math.random() * .2}s; --dl: -${Math.random()}s; `; ppwrap.appendChild(item); }); }();
    let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    let toMin = (val)=> {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;}
    aud.addEventListener('pause', mState, false);
    aud.addEventListener('play', mState, false);
    aud.addEventListener('timeupdate', () => ppwrap.dataset.tt = toMin(aud.currentTime) + '\n' + toMin(aud.duration));
    ppwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

红影 发表于 2023-7-18 21:19

这个不是斜向的那个了，其实斜向的那个也挺好玩的{:4_173:}

马黑黑 发表于 2023-7-18 21:20

红影 发表于 2023-7-18 21:19
这个不是斜向的那个了，其实斜向的那个也挺好玩的

斜向的也很俊

花飞飞 发表于 2023-7-18 21:37

红太阳照四方{:4_173:}这个比较正式。。斜的比较活泼

马黑黑 发表于 2023-7-18 22:12

花飞飞 发表于 2023-7-18 21:37
红太阳照四方这个比较正式。。斜的比较活泼

各有各的好

红影 发表于 2023-7-18 22:35

马黑黑 发表于 2023-7-18 21:20
斜向的也很俊

是啊，特别奔放{:4_173:}

马黑黑 发表于 2023-7-18 22:37

红影 发表于 2023-7-18 22:35
是啊，特别奔放

反正不是葛优躺就好

樵歌 发表于 2023-7-19 07:18

大放光芒{:4_173:}

红影 发表于 2023-7-19 16:30

马黑黑 发表于 2023-7-18 22:37
反正不是葛优躺就好

好像飞机场地面指挥的那个走你动作{:4_173:}

马黑黑 发表于 2023-7-19 20:22

红影 发表于 2023-7-19 16:30
好像飞机场地面指挥的那个走你动作

{:4_172:}

花飞飞 发表于 2023-7-24 09:45

马黑黑 发表于 2023-7-18 22:12
各有各的好

各美其美

马黑黑 发表于 2023-7-24 13:26

花飞飞 发表于 2023-7-24 09:45
各美其美

美美大不同

花飞飞 发表于 2023-7-25 08:40

马黑黑 发表于 2023-7-24 13:26
美美大不同

{:4_199:}这个好，用这个也美，那个也美，美滋滋

马黑黑 发表于 2023-7-25 11:56

花飞飞 发表于 2023-7-25 08:40
这个好，用这个也美，那个也美，美滋滋

还甜蜜蜜

花飞飞 发表于 2023-7-25 22:06

马黑黑 发表于 2023-7-25 11:56
还甜蜜蜜

这是一首好歌

马黑黑 发表于 2023-7-25 22:29

花飞飞 发表于 2023-7-25 22:06
这是一首好歌

不错的

花飞飞 发表于 2023-7-25 23:09

马黑黑 发表于 2023-7-25 22:29
不错的

{:4_208:}

马黑黑 发表于 2023-7-25 23:11

花飞飞 发表于 2023-7-25 23:09


{:4_181:}

查看完整版本: 长得周正的圈圈频谱