这个可以干啥

马黑黑

马黑黑

代码分享

1. <style>
   
2. #wrapper {
   
3.         position: absolute;
   
4.         display: flex;
   
5.         width: fit-content;
   
6.         height: fit-content;
   
7.         /* border仅用于观察 */
   
8.         border: 1px solid red;
   
9. }
   
10. #mydiv {
    
11.         width: 260px;
    
12.         height: 120px;
    
13.         display: flex;
    
14.         justify-content: center;
    
15.         align-items: center;
    
16. }
    
17. #copydiv { transform: rotateY(-180deg); }
    
18. pin-pu {
    
19.         margin-right: 1px;
    
20.         width: 1px;
    
21.         height: 10px;
    
22.         background: blue;
    
23.         animation: change .4s var(--delay) infinite alternate linear;
    
24. }
    
25. @keyframes change {
    
26.         from { height: 2px; }
    
27.         to { height: var(--hh); }
    
28. }
    
29. </style>
    
30. 
    
31. <div id="wrapper">
    
32.         <div id="mydiv"></div>
    
33.         <div id="copydiv"></div>
    
34. </div>
    
35. 
    
36. <script>
    
37. 
    
38. /* 除以几依据 pin-pu 标签的 width + 希望的间隔值即 margin-right 值 */
    
39. let total = Math.ceil(mydiv.offsetWidth / 2);
    
40. 
    
41. Array.from({length: total}).forEach((item,key) => {
    
42.         item = document.createElement('pin-pu');
    
43.         item.style.cssText += `
    
44.                 background: #${Math.random().toString(16).substr(-6)};
    
45.                 height: ${Math.random() * mydiv.offsetHeight}px;
    
46.                 --hh: ${mydiv.offsetHeight / 2 + Math.random() * mydiv.offsetHeight / 2}px;
    
47.                 --delay: -${Math.random()}s;
    
48.         `;
    
49.         mydiv.appendChild(item);
    
50. });
    
51. 
    
52. let node = mydiv;
    
53. let clone = node.cloneNode(true);
    
54. copydiv.appendChild(clone);
    
55. 
    
56. </script>

复制代码

亦是金

不知道能派上啥用场？静等老师展示！

红影

这个也是音波啊，漂亮

红影

频谱宽1，间隔1,130个小条应该最后总宽度还是260，看到#copydiv { transform: rotateY(-180deg); }才知道怎么变成520的宽了。
这个用得巧妙，这样可以少几个小条了吧，可以防止拖慢速度。

马黑黑

红影 发表于 2023-8-28 20:16
频谱宽1，间隔1,130个小条应该最后总宽度还是260，看到#copydiv { transform: rotateY(-180deg); }才知道怎 ...

这也是克隆节点的一个应用吧

马黑黑

亦是金 发表于 2023-8-28 19:56
不知道能派上啥用场？静等老师展示！

做装饰用也是可以的

马黑黑

红影 发表于 2023-8-28 19:56
这个也是音波啊，漂亮

之前做过一个的

千羽

用这个的缩小版做播放器会很精致唯美的

马黑黑

千羽 发表于 2023-8-28 20:54
用这个的缩小版做播放器会很精致唯美的

是的，这个想法挺好

千羽

马黑黑 发表于 2023-8-28 20:55
是的，这个想法挺好

受到黑黑老师表扬了，高兴中

红影

马黑黑 发表于 2023-8-28 20:48
这也是克隆节点的一个应用吧

哦，对，前面黑黑专门讲过克隆的知识呢

马黑黑

千羽 发表于 2023-8-28 21:04
受到黑黑老师表扬了，高兴中

马黑黑

红影 发表于 2023-8-28 21:05
哦，对，前面黑黑专门讲过克隆的知识呢

是的

红影

马黑黑 发表于 2023-8-28 20:49
之前做过一个的

记得做过往上的，这个是往两边的啊。

马黑黑

红影 发表于 2023-8-28 21:06
记得做过往上的，这个是往两边的啊。

做过的

亦是金

马黑黑 发表于 2023-8-28 20:48
做装饰用也是可以的

好的，我去试试！

马黑黑

亦是金 发表于 2023-8-28 21:32
好的，我去试试！

红影

马黑黑 发表于 2023-8-28 21:05
是的

我得赶紧回去再学习一下

红影

马黑黑 发表于 2023-8-28 21:07
做过的

这个比前面做的那个还漂亮