|
|

楼主 |
发表于 2022-5-27 18:00
|
显示全部楼层
原创代码:
- <style>
- .mybg {
- left: -214px; display: flex; justify-content: center; align-items: center;
- width: 1024px; height: 600px; overflow: hidden;
- background: blue repeating-radial-gradient(circle, gray, transparent, black .05px);
- cursor: pointer; position: relative;
- }
- .mybg::before {
- content: ''; width: 200%; height: 200%;
- background: conic-gradient(transparent,rgba(0,200,255,.5),transparent 50deg);
- animation: rot 4s linear infinite; position: absolute;
- }
- @keyframes rot { to { transform: rotate(1turn); } }
- </style>
- <div class="mybg"></div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=33469778.mp3" autoplay="autoplay" loop="loop"></audio>
- <script>
- let bgbox = document.querySelector('.mybg'), aud = document.querySelector('#aud');
- aud.addEventListener('timeupdate',function(){
- let pixel = aud.currentTime / 100;
- if(pixel <= 0) pixel = 0.05;
- bgbox.style.background = 'blue repeating-radial-gradient(circle, gray, transparent, black ' + pixel + 'px)';
- });
- bgbox.onclick = () => { aud.paused ? aud.play() : aud.pause(); }
- </script>
复制代码
|
|