T.S.D

马黑黑

马黑黑

代码

1. <style>
   
2. #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/jpg/tsd.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; overflow: hidden; pointer-events: none; z-index: 1; }
   
3. #papa::before, #papa::after { position: absolute; content: ''; width: 200px; height: 200px; border-radius: 50%; filter: hue-rotate(var(--hue)) opacity(.95); transition: .75s; pointer-events: auto; }
   
4. #papa::before { left: 160px; top: 240px; background: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%); }
   
5. #papa::after { left: 240px; top: 300px; background: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%); }
   
6. #papa:hover::before, #papa:hover::after { cursor: pointer; transform: scale(.5); }
   
7. li-zi { position: absolute; width: 20px; height: 20px; border-radius: 50% 0; filter: hue-rotate(var(--hue)); }
   
8. @keyframes moving {
   
9.     from { opacity: 0; transform: translate(0,0) rotate(2turn); }
   
10.     to { opacity: 1; transform: translate(var(--x0),var(--y0)); }
    
11. }
    
12. </style>
    
13. 
    
14. <div id="papa" title="播放/暂停"></div>
    
15. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1201611" autoplay loop></audio>
    
16. 
    
17. <script>
    
18. (function() {
    
19.     let all = 70;
    
20.     for(let i = 0; i < all; i++) {
    
21.         let lz = document.createElement('li-zi');
    
22.         let hudu = Math.PI / 180 * 360 / all * i;
    
23.         let xx = 600 * Math.cos(hudu), yy = 600 * Math.sin(hudu);
    
24.         lz.style.cssText += `
    
25.             --x0: ${xx}px;
    
26.             --y0: ${yy}px;
    
27.             left: calc(50% - 10px);
    
28.             top: calc(50% - 10px);
    
29.             background: #${Math.random().toString(16).substr(-6)};
    
30.             animation: moving ${Math.random() * 20 + 20}s -${Math.random() * 20}s infinite var(--state);
    
31.         `;
    
32.         papa.prepend(lz);
    
33.     }
    
34. 
    
35.     let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
36.     let render = () => papa.style.setProperty('--hue', (aud.currentTime * 10) % 360 + 'deg');
    
37.     aud.addEventListener('timeupdate',render,false);
    
38.     aud.addEventListener('playing', mState, false);
    
39.     aud.addEventListener('pause', mState, false);
    
40.     papa.addEventListener('click', ()=> aud.paused ? aud.play() : aud.pause(),false);
    
41. })();
    
42. </script>

复制代码

红影

好奇异的画面，音乐也很奇特。黑黑又一个充满创意的制作

红影

按钮的变色好美，粒子的形态也漂亮

红影

T、S、D:一般重复根音与五音,非必要不重复三音——重复三音是两个三音不能同时出现。T主功能,S下属功能,D属功能,它们都有各自的替代和弦。主功能组用字母T(Tonic)表示,下属功能组用字母S(Subdominant)表示,属功能用组字母D(Dominant)表示。

红影

没看懂标题，特地去搜了一下。欣赏黑黑好帖

马黑黑

红影 发表于 2024-1-19 09:48
没看懂标题，特地去搜了一下。欣赏黑黑好帖

这支乐曲，是黑月亮帝国的一支，它的名字就叫 T.S.D，和你查到的东东有点联系的

马黑黑

红影 发表于 2024-1-19 09:44
按钮的变色好美，粒子的形态也漂亮

粒子也变色，因为它运动、消失，不细心感知不到

马黑黑

红影 发表于 2024-1-19 09:42
好奇异的画面，音乐也很奇特。黑黑又一个充满创意的制作

音乐与画面都很治愈的

樵歌

原来是动漫里的场景儿，难怪得好玄幻。音乐也像外星来的

侃大山

好看，很梦幻的场景

马黑黑

醉美水芙蓉 发表于 2024-1-19 17:36
播放器变色放大缩小！谢谢老师分享！

红影

马黑黑 发表于 2024-1-19 11:58
这支乐曲，是黑月亮帝国的一支，它的名字就叫 T.S.D，和你查到的东东有点联系的

呵呵，习惯了对什么有疑问就去搜一下

红影

马黑黑 发表于 2024-1-19 11:59
粒子也变色，因为它运动、消失，不细心感知不到

还真没注意，只以为明暗在变化呢。
还有粒子路过按钮时的颜色变化也挺有趣的呢

红影

马黑黑 发表于 2024-1-19 12:00
音乐与画面都很治愈的

是的，很让人沉入的感觉

马黑黑

红影 发表于 2024-1-19 20:27
是的，很让人沉入的感觉

马黑黑

红影 发表于 2024-1-19 20:26
还真没注意，只以为明暗在变化呢。
还有粒子路过按钮时的颜色变化也挺有趣的呢

这里面，::before 和 ::after 两个伪元素的层级关系就可以看出来了，后者默认处在较高的层级

马黑黑

红影 发表于 2024-1-19 20:25
呵呵，习惯了对什么有疑问就去搜一下

应该额

红影

马黑黑 发表于 2024-1-19 20:46

静下心来时，尤其如此