复刻 《万籁音》 （凡哥代码）

司敏儿

司敏儿

@凡哥  @花简静  


改了  c-c  

去掉变色 ，用了单色

司敏儿

不会编歌词 ，上纯音

司敏儿

1. <style>
   
2. #tz { margin: 20px auto; width: 1024px; height: 576px; background: url('https://gd-hbimg.huaban.com/9919b2948a5911c74e8c179216102decb960e1d6200023-BhFHIC_fw1200') no-repeat center/cover; box-shadow: 3px 3px 6px gray; z-index: 1; position: relative; }
   
3. 
   
4. #tz::before { content: attr(data-lrc); position: absolute; top: 15px; width: 100%; height: 60px; text-align: center; font: normal 32px/60px sans-serif; color: transparent; text-shadow: 2px 2px 2px rgba(0,0,0,.8); background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text; }
   
5. #player { left: 350px; top: 200px; width: 160px; height: 160px; filter: drop-shadow(0 0 50px white); cursor: pointer; transition: .5s; position: absolute; display: grid; place-items: center; animation: rot 8s linear infinite var(--state); }
   
6. #player:hover { width: 50px; }
   
7. c-c { position: absolute; width: 80%; height: 150px; border:3px solid snow;content: url('https://gd-hbimg.huaban.com/2136a30ff2d51f03bcb29932624f77616917218d47da-sHDdfg') ;  border-radius: 50%; opacity: .55; }
   
8. @keyframes rot { to { transform: rotate(1turn); } }
   
9. </style>
   
10. 
    
11. <div id="tz" data-lrc="万籁音">
    
12.     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=35307327" autoplay loop></audio>
    
13.     <div id="player"></div>
    
14. </div>
    
15. 
    
16. <script>
    
17. var curkey = 0, lrcAr = [], total =3;
    
18. Array.from({length: total}).forEach((c,k) => {
    
19.     c = document.createElement('c-c');
    
20.     c.style.cssText += `
    
21.         transform: rotate(${360 / total * k}deg);
    
22.         border-color: #${Math.random()};
    
23.     `;
    
24.     player.appendChild(c);
    
25. });
    
26. var getAr = (text) => {
    
27.     var ar = text.trim().split('\n');
    
28.     ar.sort();
    
29.     var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
    
30.     ar.forEach(item => {
    
31.         let result = item.match(reg);
    
32.         let tmsg = parseInt(result[1]) * 60 + parseInt(result[2]) + parseInt(result[3]) / 1000;
    
33.         lrcAr.push([tmsg, result[4].trim()]);
    
34.     });
    
35. };
    
36. var mState = () => {
    
37.     tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
    
38.     player.title = ['暂停','播放'][+aud.paused];
    
39. };
    
40. aud.onseeked = () => curkey = 0;
    
41. aud.onplaying = aud.onpause = () => mState();
    
42. aud.ontimeupdate = () => {
    
43.     if(curkey > lrcAr.length - 1) return;
    
44.     if(aud.currentTime >= lrcAr[curkey][0]) {
    
45.         tz.dataset.lrc = lrcAr[curkey][1];
    
46.         curkey ++;
    
47.     }
    
48. };
    
49. player.onclick = () => aud.paused ? aud.play() : aud.pause();
    
50. 
    
51. var lrc = `[00:00.00]万籁音`;
    
52. getAr(lrc);
    
53. </script>

复制代码

花简静

司敏儿 发表于 2024-6-19 23:09
@凡哥  @花简静  

天哪，敏儿你真是太棒了。。
这个小播里面加了图片，
这个变形真是太酷了。

司敏儿

花简静 发表于 2024-6-19 23:15
天哪，敏儿你真是太棒了。。
这个小播里面加了图片，
这个变形真是太酷了。

觉得颜色多了

把这里  编辑了  border-color: #${Math.random()};

花简静

司敏儿 发表于 2024-6-19 23:21
觉得颜色多了

把这里  编辑了  border-color: #${Math.random()};

好哒，这个单色的还是十分漂亮的。

令狐冲

司敏儿学的真快
我遇代码头晕。。。

清梦

播放器真好看，懂得看门道，不懂看热闹

清梦

欣赏敏儿带来的精彩制作，问好敏儿