改进版小频谱（小白帽+倒影）

马黑黑

马黑黑

1. <style>
   
2. 
   
3. .outer { position: relative; width: 760px; height: 520px; cursor: pointer; background: #ccc linear-gradient(rgba(100,26,210,.75),rgba(25,175,100,.65)); }
   
4. .mama { position: absolute; left: 20px; top: 20px; width: fit-content; height: fit-content; cursor: pointer; }
   
5. .wrap { width: 96px; height: 80px; -webkit-box-reflect: below 0 linear-gradient(transparent,rgba(0,0,0,.15)); display: flex; align-items: flex-end; gap: 4px; }
   
6. .wrap span { width: 6px; height: 60px; background-color: rgba(255,0,0,.6); display: block; position: relative; }
   
7. .wrap span::before { position: absolute; content: ''; width: inherit; height: 3px; background: #eee; top: -3px; animation: up 1s ease-in infinite; }
   
8. .mama meter { width: 96px; position: absolute; bottom: -4px;}
   
9. @keyframes up { from { top: -3px;  } to { top: -16px; } }
   
10. 
    
11. </style>
    
12. 
    
13. <div class="outer">
    
14.         <div class="mama">
    
15.                 <div class="wrap"></div>
    
16.                 <meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
    
17.         </div>
    
18. </div>
    
19. <audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/06/02/abf40da9a702bb249811e7d47ac25f91.mp3" autoplay="autoplay" loop="loop"></audio>
    
20. 
    
21. <script>
    
22. 
    
23. let mama = document.querySelector('.mama'), wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud'), meter = document.querySelector('#meter');
    
24. let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min, prog = (tt, cc) => 100 * cc / tt;
    
25. 
    
26. Array.from({length: 10}).forEach((ele) => {
    
27.         ele = document.createElement('span');
    
28.         ele.className = 'sskey';
    
29.         ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
    
30.         wrap.appendChild(ele);
    
31. })
    
32. 
    
33. let sskey = document.querySelectorAll('.sskey');
    
34. 
    
35. mama.onclick = () => aud.paused ? aud.play() : aud.pause();
    
36. 
    
37. aud.addEventListener('timeupdate', () => {
    
38.         Array.from(sskey).forEach((ele) => {
    
39.                 ele.style.height = num(10, 60) + 'px';
    
40.         })
    
41.         meter.value = prog(aud.duration, aud.currentTime);
    
42. })
    
43. 
    
44. </script>

复制代码

马黑黑

说明：

一、.wrap 选择器改用 flex 弹性布局并加入 align-items: flex-end 固定子元素的Y轴 ，这样它可以极好地规范了子元素 span 定位在其底部，同时通过 gap: 4px; 来定义子元素彼此间的间隔（4px可以更改为其他值）。
二、flex布局的采用解决了频谱底盘不动的问题，又解决了频谱栅栏的横向定位，故而原来一系列的 nth-child 定义可以统统删掉，减少了代码量，CSS变量也可以不要了，简化了代码。

三、wrap 的宽度与 meter的尺寸及定位，在更改相关数值是仍需留意。

加林森

好的，又有改进版出来啦。

加林森

老黑我已经制作出来一个，你帮着看看。谢谢！

小辣椒

黑黑的改进版出来了，我前面都没有做的

红影

这个好，直接用gap: 4px;，就直接得到了间隙，不需要一个个去设置数值了

红影

又小白帽在，无论在什么底板上，无论那些小跳会随机出现什么颜色，都会知道有跳跃的小条的存在

红影

我在本地做了个nth-child 定义的，一个个去加，虽然很麻烦，倒也弄出来了

马黑黑

红影 发表于 2022-6-3 19:28
我在本地做了个nth-child 定义的，一个个去加，虽然很麻烦，倒也弄出来了

知道的

马黑黑

红影 发表于 2022-6-3 19:25
这个好，直接用gap: 4px;，就直接得到了间隙，不需要一个个去设置数值了

flex弹性布局还是可以挖掘的，开始我没想到用它

马黑黑

醉美水芙蓉 发表于 2022-6-3 18:42
进来欣赏黑黑老师新作品！

马黑黑

小辣椒 发表于 2022-6-3 19:24
黑黑的改进版出来了，我前面都没有做的

将来做的时候可以考虑这个，比较容易控制

小辣椒

马黑黑 发表于 2022-6-3 21:46
将来做的时候可以考虑这个，比较容易控制

好的，这个也是很漂亮的

马黑黑

小辣椒 发表于 2022-6-3 21:50
好的，这个也是很漂亮的

过得去的