橄榄树：用类做频谱修正版

马黑黑

马黑黑

代码（兼容性较好）

1. <style>
   
2. #mydiv {
   
3.     margin: 0 0 0 calc(50% - 593px);
   
4.     width: 1024px;
   
5.     height: 640px;
   
6.     background: linear-gradient(to top right,rgba(0,0,0,.7),rgba(0,100,0,.75));
   
7.     overflow: hidden;
   
8.     position: relative;
   
9.     --state: paused;
   
10. }
    
11. .leaf {
    
12.     position: absolute;
    
13.     width: 50px;
    
14.     height: 50px;
    
15.     top: -100px;
    
16.     border-radius: 0% 100%;
    
17.     background: linear-gradient(45deg, green, lightgreen);
    
18.     animation: drop 6s var(--delay) infinite linear var(--state);
    
19.     --delay: 0s;
    
20. }
    
21. .leaf:nth-of-type(2) { --delay: -2s; }
    
22. .leaf:nth-of-type(3) { --delay: -4s; }
    
23. @keyframes drop { to { transform: rotate(-10deg) translateY(760px); } }
    
24. </style>
    
25. 
    
26. <div id="mydiv">
    
27.     <span class="leaf"></span>
    
28.     <span class="leaf"></span>
    
29.     <span class="leaf"></span>
    
30. </div>
    
31. 
    
32. <script>
    
33. 
    
34. let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
35. let msort = (ar) => {
    
36.     let newAr = [];
    
37.     ar.forEach((v,k) => k % 2 === 0 ? newAr.unshift(v) : newAr.push(v));
    
38.     return newAr;
    
39. }
    
40. 
    
41. class Pinpu {
    
42.     constructor(pa) {
    
43.         this.pa = pa;
    
44.         this.aud = document.createElement('audio');
    
45.         this.wrap = document.createElement('div');
    
46.         this.pinpu = { num: 60, width: 6, height: 100 }
    
47.     }
    
48.     createPinpu() {
    
49.         let styles = document.styleSheets;
    
50.         let mcss = document.styleSheets[styles.length - 1];
    
51.         mcss.insertRule(`.mplayer { position: absolute; width: ${(this.pinpu.width + 2) * this.pinpu.num}px; height: ${this.pinpu.height * 1.5}px; left: 50%; bottom: 0px; transform: translate(-50%); cursor: pointer; }`, mcss.rules.length);
    
52.         mcss.insertRule(`@keyframes up { from { height: 0px; } to { height: var(--height); } }`, mcss.rules.length);
    
53.         this.wrap.className = 'mplayer';
    
54.         this.aud.id = 'aud';
    
55.         this.aud.autoplay = true;
    
56.         this.aud.loop = true;
    
57.         this.pa.appendChild(this.wrap);
    
58.         this.pa.appendChild(this.aud);
    
59. 
    
60.         Array.from({length: this.pinpu.num}).forEach((item,key) => {
    
61.             item = document.createElement('span');
    
62.             let ar = Array.from(Array(this.pinpu.num), (v,k) => this.pinpu.num - k -1);
    
63.             item.style.cssText = `
    
64.                 position: absolute;
    
65.                 width: ${this.pinpu.width}px;
    
66.                 left: ${(this.pinpu.width + 2) * key}px;
    
67.                 bottom: 0px;
    
68.                 background: #${Math.random().toString(16).substr(-6)};
    
69.                 animation: up ${0.3 + Math.random() * 0.3}s -${Math.random()}s infinite alternate linear var(--state);
    
70.                 --height: ${this.pinpu.height / 2 + msort(ar)[key] * 1.2}px;
    
71.             `;
    
72.             this.wrap.appendChild(item);
    
73.         });
    
74.         this.click();
    
75.     }
    
76.     click() {
    
77.         this.wrap.onclick = () => this.aud.paused ? this.aud.play() : this.aud.pause();
    
78.     }
    
79. }
    
80. 
    
81. let pp = new Pinpu(mydiv);
    
82. pp.pinpu.num = 100;
    
83. pp.pinpu.width = 5;
    
84. pp.pinpu.height = 100;
    
85. pp.aud.src = 'https://music.163.com/song/media/outer/url?id=25707174';
    
86. pp.createPinpu();
    
87. 
    
88. aud.addEventListener('play', mState, false);
    
89. aud.addEventListener('pause', mState, false);
    
90. 
    
91. </script>

复制代码

马黑黑

这个，频谱的布局，不再使用flex布局，取而代之的是绝对定位，通过算法一一排列，兼容性应该较好，手机版下不会频谱颠倒、抖动。

马黑黑

醉美水芙蓉 发表于 2023-7-17 06:45
手机观看正常！

这个是必须正常的