Beyond - 无尽空虚

马黑黑

🪶 🪶 🪶 🪶

花潮lrc在线

马黑黑

代码分享

1. <style>
   
2. #mydiv { margin: -80px 0 0 calc(50% - 681px); width: 1200px; height: 675px; background: #cc8c70 url('https://638183.freep.cn/638183/t23/2/wjkx.jpg') no-repeat center/cover; box-shadow: 0 0 8px 0 #000; opacity: .95; overflow: hidden; z-index: 1; position: relative; --state: paused; }
   
3. #mydiv::before, #mydiv::after { position: absolute; content: '\1F982'; font-size: 60px; bottom: 15px; left: 40%; }
   
4. #mydiv::after { content: '\1FAB2'; transform: translateY(15px) rotate(-10deg); font-size: 40px; }
   
5. #lrc { position: absolute; top: 10px; left: 50%; transform: translate(-50%); font: bold 2.4em sans-serif; color: rgb(240,240,240); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px rgba(0,0,0,.95)); --motion: cover2; --tt: 5s; }
   
6. #lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,rgba(112,145,180,.45),rgba(86,145,250,.75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
   
7. pinpu-wrapper { position: absolute; bottom: 80px; left: 285px; cursor: pointer; }
   
8. pin-pu { position: absolute; bottom: 0; animation: pinpuMotion var(--du) var(--delay) infinite alternate linear var(--state); --psw: 6px; }
   
9. pin-pu::before { content: ''; position: absolute; left: calc(50% - var(--psw) / 2); width: var(--psw); height: var(--psw); border-radius: 50%; background: snow; }
   
10. .mybox { position: absolute; top: -100px; left: 80%; font-size: 50px; animation: down 8s var(--delay) infinite linear var(--state); --delay: 0s; --deg: 5deg; }
    
11. .mybox:nth-of-type(2) { --delay: -2s; --deg: -5deg; }
    
12. .mybox:nth-of-type(3) { --delay: -4s; --deg: -15deg; }
    
13. .mybox:nth-of-type(4) { --delay: -6s; --deg: -15deg; }
    
14. @keyframes pinpuMotion { from { height: 0px; } to { height: var(--height); } }
    
15. @keyframes down { to { transform: rotate(var(--deg)) translateY(800px) rotate(360deg); } }
    
16. @keyframes cover1 { from { width: 0; } to { width: 100%; } }
    
17. @keyframes cover2 { from { width: 0; } to { width: 100%; } }
    
18. </style>
    
19. 
    
20. <div id="mydiv">
    
21.     <span class="mybox">&#129718;</span>
    
22.     <span class="mybox">&#129718;</span>
    
23.     <span class="mybox">&#129718;</span>
    
24.     <span class="mybox">&#129718;</span>
    
25.     <pinpu-wrapper></pinpu-wrapper>
    
26.     <div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
    
27. </div>
    
28. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=346591" autoplay loop></audio>
    
29. 
    
30. <script>
    
31. 
    
32. +function() {
    
33.     let pinpuNum = 80, pinpuWidth = 4, pinpuHeight = 200, mKey = 0, mFlag = true, slip = 0.2; let ppwrap = document.querySelector('pinpu-wrapper');
    
34.     let lrcAr = [ [2," Beyond - 无尽空虚",22.5], [24.47,"为何在这里",3.0], [27.46,"疲倦像半醉",3.0], [30.49,"曾在这空间",2.6], [33.13,"跟你相拥抱",4.0], [37.72,"只有唏嘘的追忆",3.0], [40.67,"无言落寞地落泪",3.0], [43.66,"谁在这晚里放纵与她温馨",5.0], [48.65,"无尽空虚",4.1], [52.73,"似把刀锋静静穿过心窝 Wo",8.0], [60.71,"期待的爱",4.9], [65.58,"怎么一生总不可碰到 Wo",8.6], [86.42,"仍然在这里",3.0], [89.45,"无力像半醉",3.0], [92.43,"谁令我的心",2.6], [95.06,"此际多冰冷",4.6], [99.69,"只有唏嘘的追忆",2.9], [102.61,"无言落寞地落泪",3.0], [105.6,"谁在这晚里放纵与她温馨",5.0], [110.61,"无尽空虚",4.1], [114.68,"似把刀锋静静穿过心窝 Wo",8.0], [122.66,"期待的爱",4.9], [127.55,"怎么一生总不可碰到 Wo",8.0], [171.02,"无尽空虚",4.1], [175.08,"似把刀锋静静穿过心窝 Wo",8.0], [183.13,"期待的爱",4.1], [188.51,"怎么一生总不可碰到",7.2], [195.21,"无尽空虚",4.1], [199.32,"似把刀锋静静穿过心窝 Wo",9.0], [207.32,"期待的爱",4.1], [212.21,"怎么一生总不可碰到 Wo",9.0], [233.03,"La... La...",3.0], [236.03,"La... La...",3.0], [239.05,"La... La...",3.0], [242.06,"Da La Da La Da",3.0], [245.1,"La... La...",3.0], [248.09,"La... La...",3.0], [251.14,"La... La...",3.0], [254.16,"Da La Da La Da",3.0], [257.18,"La... La...",3.0], [260.16,"La... La...",3.0], [263.2,"La... La...",3.0], [266.22,"Da La Da La Da",5] ];
    
35.     let mState = () => aud.paused ? (mydiv.style.setProperty('--state','paused'), lrc.style.setProperty('--state','paused')) : (mydiv.style.setProperty('--state','running'), lrc.style.setProperty('--state','running'));
    
36.     let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr[mKey][1];lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
    
37.     let calcKey = () => {for(j = 0; j < lrcAr.length; j ++) {if(aud.currentTime <= lrcAr[j][0]) {mKey = j - 1;break;}}if(mKey <0) mKey = 0;if(mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);showLrc(time);};
    
38.     let msort = (ar) => {let newAr = [];ar.forEach((v,k) => k % 2 === 0 ? newAr.unshift(v) : newAr.push(v));return newAr;}
    
39.     +function() {let ar = Array.from(Array(pinpuNum), (v,k) => pinpuNum - k -1);Array.from({length: pinpuNum}).forEach((item,key) => {item = document.createElement('pin-pu');item.style.cssText += `width: ${pinpuWidth}px;left: ${(pinpuWidth + 2) * key}px;background: #${Math.random().toString(16).substr(-6)};--height: ${15 + (pinpuHeight - 15) / pinpuNum * msort(ar)[key]}px;--du: ${Math.random() * .3 + .3}s;--delay: -${Math.random()}s;--psw: ${pinpuWidth + 2}px`;ppwrap.appendChild(item);});ppwrap.style.height = `${pinpuHeight}px`;ppwrap.style.width = `${(pinpuWidth + 2) * pinpuNum}px`;}();
    
40.     aud.addEventListener('play', mState, false);
    
41.     aud.addEventListener('pause', mState, false);
    
42.     aud.addEventListener('seeked', calcKey, false);
    
43.     aud.addEventListener('timeupdate', () => {
    
44.     for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr[j][0] + slip) {cKey = j;if (mKey === j) showLrc(lrcAr[j][2]);else continue;}}});
    
45.     ppwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
    
46. }();
    
47. 
    
48. </script>

复制代码

花飞飞

新频谱2.0上线，加了个圆点点，更活泼更好看。。。

红影

给频谱戴个小圆帽，这个漂亮

红影

这个频谱的位置特别好，正好分布在宫门旁

马黑黑

醉美水芙蓉 发表于 2023-7-18 12:05
有了帽子更漂亮了！

马黑黑

红影 发表于 2023-7-18 09:13
给频谱戴个小圆帽，这个漂亮

伪元素频谱帽

马黑黑

红影 发表于 2023-7-18 09:38
这个频谱的位置特别好，正好分布在宫门旁

像素尺量一量

马黑黑

花飞飞 发表于 2023-7-18 08:39
新频谱2.0上线，加了个圆点点，更活泼更好看。。。

还行

花飞飞

马黑黑 发表于 2023-7-18 12:16
还行

我跟了一贴，效果加上了之前那个八爪鱼，只是不确定论坛发有没有问题可有空瞧瞧?

马黑黑

花飞飞 发表于 2023-7-18 12:18
我跟了一贴，效果加上了之前那个八爪鱼，只是不确定论坛发有没有问题可有空瞧瞧?

一般没啥问题

花飞飞

马黑黑 发表于 2023-7-18 12:19
一般没啥问题

心虚虚。。。我得找个地儿试一下。。

马黑黑

花飞飞 发表于 2023-7-18 12:20
心虚虚。。。我得找个地儿试一下。。

红影

马黑黑 发表于 2023-7-18 12:16
伪元素频谱帽

看出来了

红影

马黑黑 发表于 2023-7-18 12:16
像素尺量一量

我一般都懒得量，都是多调几次调到位

花飞飞

马黑黑 发表于 2023-7-18 12:21

马黑黑

花飞飞 发表于 2023-7-18 16:58

把中括号内的变量 i 写成 [ i ] 就没事了。i 两边没有空格的话，论坛的 ubb 代码机制会捕捉到，然后把它变成 i

花飞飞

马黑黑 发表于 2023-7-18 17:13
把中括号内的变量 i 写成 [ i ] 就没事了。i 两边没有空格的话，论坛的 ubb 代码机制会捕捉到，然后把它 ...

啊啊啊，论坛太自动化了。。。

马黑黑

花飞飞 发表于 2023-7-18 17:22
啊啊啊，论坛太自动化了。。。

我第一次碰到时也是懵逼，后来查看被它修改过的代码才知道是怎么回事。所以，步进变量我极少用 i ，因为需要读取数组元素内容是，离不开 [ i ]，一不小心就忘了空格，就出错了。