长得周正的圈圈频谱

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

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

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

x

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