复调音乐：结

马黑黑

马黑黑

原创代码：

1. <style>
   
2. .mybg {
   
3.         left: -214px; display: flex; justify-content: center; align-items: center;
   
4.         width: 1024px; height: 600px; overflow: hidden;
   
5.         background: blue repeating-radial-gradient(circle, gray, transparent, black .05px);
   
6.         cursor: pointer; position: relative;
   
7. }
   
8. .mybg::before {
   
9.         content: ''; width: 200%; height: 200%;
   
10.         background: conic-gradient(transparent,rgba(0,200,255,.5),transparent 50deg);
    
11.         animation: rot 4s linear infinite; position: absolute;
    
12. }
    
13. @keyframes rot { to { transform: rotate(1turn); } }
    
14. </style>
    
15. 
    
16. <div class="mybg"></div>
    
17. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=33469778.mp3" autoplay="autoplay" loop="loop"></audio>
    
18. 
    
19. <script>
    
20. let bgbox = document.querySelector('.mybg'), aud = document.querySelector('#aud');
    
21. 
    
22. aud.addEventListener('timeupdate',function(){
    
23.         let pixel = aud.currentTime / 100;
    
24.         if(pixel <= 0) pixel = 0.05;
    
25.         bgbox.style.background = 'blue repeating-radial-gradient(circle, gray, transparent, black ' + pixel + 'px)';
    
26. });
    
27. 
    
28. bgbox.onclick = () => { aud.paused ? aud.play() : aud.pause(); }
    
29. </script>

复制代码

红影

这背景真神奇，变化无穷

马黑黑

红影 发表于 2022-5-27 20:12
这背景真神奇，变化无穷

背景是次要的，关键是音乐

红影

不但自身变化着，拉动鼠标的时候还有闪光的错觉，厉害

红影

仅仅是.05px的变化就能有这样的效果，真想不到，还去利用音乐时长得到数值？更想不到

马黑黑

红影 发表于 2022-5-27 20:18
仅仅是.05px的变化就能有这样的效果，真想不到，还去利用音乐时长得到数值？更想不到

audio的进度已秒计，音乐开始时 是0秒，0还要除以100。所以有个条件语句，如果变量值低于等于0则等于0.05，否则背景会是一片黑。然后一直变化，径向渐变的变化参数最低时0.00xpx，最高时一般而言是五六个像素，背景就这样变化着。

马黑黑

醉美水芙蓉 发表于 2022-5-27 20:48
探照灯照亮整个世界！很美！

这个探照灯效果还是挺好的

加林森

老黑真厉害&#128077;&#127995;明天来学习。

绿叶清舟

漂亮的效果

马黑黑

绿叶清舟 发表于 2022-5-28 15:34
漂亮的效果

炫酷也会令人眩晕

绿叶清舟

马黑黑 发表于 2022-5-28 15:57
炫酷也会令人眩晕

还会眼花了

马黑黑

绿叶清舟 发表于 2022-5-28 20:23
还会眼花了

就是呀，所要要有点什么降噪

绿叶清舟

马黑黑 发表于 2022-5-28 21:17
就是呀，所要要有点什么降噪

听上去很复杂的啊

马黑黑

绿叶清舟 发表于 2022-5-28 21:26
听上去很复杂的啊

一般一般

小辣椒

这里没有注意，黑黑这个有点像探照灯

马黑黑

小辣椒 发表于 2022-5-28 21:54
这里没有注意，黑黑这个有点像探照灯

元素里头有探照灯

红影

马黑黑 发表于 2022-5-27 20:32
audio的进度已秒计，音乐开始时 是0秒，0还要除以100。所以有个条件语句，如果变量值低于等于0则等于0.05 ...

构思很巧妙，这个纯代码的帖子真好看

红影

马黑黑 发表于 2022-5-27 20:13
背景是次要的，关键是音乐

背景也很主要，背景漂亮，听音乐也赏心悦目