带白帽子的小频谱

马黑黑

马黑黑

1. <style>
   
2. .outer { position: relative; width: 760px; height: 520px; cursor: pointer; background: linear-gradient(rgba(170,26,210,.75),rgba(25,175,100,.65)); }
   
3. .mama { left: 20px; top: 20px; width: fit-content; height: fit-content; position: absolute; cursor: pointer; }
   
4. .wrap { width: 60px; height: 60px;  box-reflect: right; -webkit-box-reflect: right 1px; position: relative; }
   
5. .mama meter { width: 120px; position: relative; }
   
6. .wrap span { --ww: 6px; width: var(--ww); height: 60px; bottom: -8px; background-color: rgba(255,0,0,.6); display: inline-block; position: absolute; }
   
7. .wrap span:nth-child(2) { left: var(--ww); }
   
8. .wrap span:nth-child(3) { left: calc(var(--ww) * 2); }
   
9. .wrap span:nth-child(4) { left: calc(var(--ww) * 3); }
   
10. .wrap span:nth-child(5) { left: calc(var(--ww) * 4); }
    
11. .wrap span:nth-child(6) { left: calc(var(--ww) * 5); }
    
12. .wrap span:nth-child(7) { left: calc(var(--ww) * 6); }
    
13. .wrap span:nth-child(8) { left: calc(var(--ww) * 7); }
    
14. .wrap span:nth-child(9) { left: calc(var(--ww) * 8); }
    
15. .wrap span:nth-child(10) { left: calc(var(--ww) * 9); }
    
16. .wrap span::before { position: absolute; content: ''; width: inherit; height: 3px; background: #eee; top: -3px; animation: up 1s ease-in infinite; }
    
17. @keyframes up { from { top: -6px;  } to { top: -16px; } }
    
18. </style>
    
19. 
    
20. <div class="outer">
    
21.         <div class="mama">
    
22.                 <div class="wrap"></div>
    
23.                 <meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
    
24.         </div>
    
25. </div>
    
26. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1374469502.mp3" autoplay="autoplay" loop="loop"></audio>
    
27. 
    
28. <script>
    
29. 
    
30. let mama = document.querySelector('.mama'), wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud'), meter = document.querySelector('#meter');
    
31. let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min, prog = (tt, cc) => 100 * cc / tt;
    
32. 
    
33. Array.from({length: 10}).forEach((ele) => {
    
34.         ele = document.createElement('span');
    
35.         ele.className = 'sskey';
    
36.         ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
    
37.         wrap.appendChild(ele);
    
38. })
    
39. 
    
40. let sskey = document.querySelectorAll('.sskey');
    
41. 
    
42. mama.onclick = () => aud.paused ? aud.play() : aud.pause();
    
43. 
    
44. aud.addEventListener('timeupdate', () => {
    
45.         Array.from(sskey).forEach((ele) => {
    
46.                 ele.style.height = num(20, 60) + 'px';
    
47.         })
    
48.         meter.value = prog(aud.duration, aud.currentTime);
    
49. })
    
50. 
    
51. </script>
    

复制代码

红影

黑黑真的用纯代码弄出了带白帽的小频谱，真棒

加林森

这个还是透明的，真漂亮。

红影

有没有办法让频谱拉开点距离，不要挨得这么紧呢？那样就跟小辣椒的那个动图一样了呢。

红影

黑黑厉害，简直是无所不能

小辣椒

黑黑，你真的万能了

小辣椒

可惜今天端午节家里人放假，我不能玩

马黑黑

小辣椒 发表于 2022-6-3 12:00
可惜今天端午节家里人放假，我不能玩

城管多了

马黑黑

小辣椒 发表于 2022-6-3 11:59
黑黑，你真的万能了

哪里哪里？再怎么着也只是一两下子而已，不是万能

马黑黑

红影 发表于 2022-6-3 11:37
黑黑厉害，简直是无所不能

言重了，哪有什么无所不能

小辣椒

马黑黑 发表于 2022-6-3 12:03
城管多了

就是，哎。。。。。

小辣椒

马黑黑 发表于 2022-6-3 12:04
哪里哪里？再怎么着也只是一两下子而已，不是万能

太佩服了

马黑黑

红影 发表于 2022-6-3 11:37
有没有办法让频谱拉开点距离，不要挨得这么紧呢？那样就跟小辣椒的那个动图一样了呢。

这个简单呀。给 .wrap span 设置一个 margin-right 值，比如 margin-right : 2px; 就可以的，不过其他东东的尺寸要重新设定一下

马黑黑

加林森 发表于 2022-6-3 11:36
这个还是透明的，真漂亮。

没有透明吧

马黑黑

小辣椒 发表于 2022-6-3 12:06
太佩服了

小辣椒

马黑黑 发表于 2022-6-3 12:08

喝茶

马黑黑

小辣椒 发表于 2022-6-3 12:09
喝茶

谢谢

小辣椒

马黑黑 发表于 2022-6-3 12:10
谢谢

黑黑，你脑子里藏的东西真多

马黑黑

红影 发表于 2022-6-3 11:37
有没有办法让频谱拉开点距离，不要挨得这么紧呢？那样就跟小辣椒的那个动图一样了呢。

或者直接拉开距离便可：

.wrap span:nth-child(3) { left: calc(var(--ww) * 2); }
.wrap span:nth-child(4) { left: calc(var(--ww) * 3); }
…………

乘以 x 之后再加上 2px:

left: calc(var(--ww) * 2 + 2px);