立体圆环频谱

马黑黑

早些时候，这里介绍过3d盒子的制作，其中的相关知识与技巧在这里用得上，感兴趣的朋友可以在坛子内搜一搜，在此，仅就实现3d原理做简单复习：

一、CSS 3d景深属性 ：这是3d实现的“场景”，3d景深提供具有纵深感的舞台。景深设置在父级元素，可以是body元素，但一般建议需要3d展示的子元素的父元素。设置方法：

    perspective: 2000px;

perspective 属性用于设置3d场景，其值为具体数值加尺寸单位。景深的尺寸会直接影响其下子元素的3d样式，所以要设置得当，值越大纵深尺度越大、3d子元素可能会更细腻。

二、CSS 3d样式属性 ：用于子元素，表明子元素使用3d渲染样式。语句：

    transform-style: preserve-3d;

transform-style 属性声明渲染方式，3d的值是唯一的，preserve-3d。设置此属性的子元素其实也是一个容器，真正要以3d呈现的元素是它的子元素，就是说，它容纳的诸多的子元素才是真的以3d样式渲染，于这些子元素而言，设置了 transform-style: preserve-3d; 的元素是爸爸，设置了 perspective: 2000px; 的元素是爷爷，往下我们称这些3d渲染的元素为子子元素。

至此，3d氛围已经准备就绪，但3d的呈现还需要一些细节操作——

三、使用 transform 通过旋转、移位等方法组装立体盒子

transform属性有一个巧妙的方法，先rotate一定角度、再translate一定距离，能让元素绕圈圈排列。利用这一点，我们先以绝对定位的方式固定好子子元素在相同的位置，然后：

    transform: rotateY(??deg) translateZ(??px);

子子元素先绕Y轴旋转一定角度，再往Z轴平移一定距离。每一个子子元素转动多少角度，依据子子元素的数量，用 360/总数得出；平移具体距离，计算方法是子子元素的爸爸（设置了 transform-style: preserve-3d; 那个）的宽度除以2（子子元素的宽度也应考虑在计算之列，这里不详细讨论）。

频谱不用顶盖和底盖，所以仅用 rotateY 和 translateZ 就能解决问题。到这里，就差不多了，再加上一些其他的修饰，比如频谱颜色、频谱帽、频谱旋转、频谱高低变化等等，就完美了。

下面是我刚编写好的示例代码：

1. <style>
   
2. #papa { margin: auto; width: 1024px; height: 640px; background: black linear-gradient(to right bottom,hsla(26,100%,50%,.75),hsla(200,100%,50%,.75)); box-shadow: 3px 3px 20px #000; display: grid; place-items: center; perspective: 3000px; position: relative; z-index: 1; }
   
3. #mplayer { position: absolute; bottom: 40px; width: 300px; height: 250px; display: grid; place-items: center; transform-style: preserve-3d; animation: rot3d 100s infinite linear; }
   
4. .mline { position: absolute; width: 8px; height: 10px; bottom: 0; border-radius: 10px 10px 0 0; opacity: .95; }
   
5. .mline::before { position: absolute; content: ''; width: 100%; height: 8px; background: var(--psecolor); border-radius: 50%; transform: scale(1.5); transition: all var(--ts); animation: up 1s infinite; }
   
6. @keyframes rot3d { to { transform: rotateY(1turn); } }
   
7. @keyframes up { to { top: -20px; } }
   
8. </style>
   
9. 
   
10. <div id="papa">
    
11.         <div id="mplayer"></div>
    
12. </div>
    
13. 
    
14. <script>
    
15. 
    
16. let total = Math.floor(mplayer.offsetWidth / 4), mRad = Math.floor(mplayer.offsetWidth / 2);
    
17. for(j=0; j< total; j++) {
    
18.         let ele = document.createElement('span');
    
19.         ele.className = 'mline';
    
20.         ele.style.cssText += `
    
21.                 background: linear-gradient(to bottom, #${Math.random().toString(16).substr(-6)}, #${Math.random().toString(16).substr(-6)});
    
22.                 height: ${Math.floor(Math.random() * 80) + 20}px;
    
23.                 transform: rotateY(${j*360/total}deg) translateZ(${mRad}px);
    
24.                 --psecolor: linear-gradient(135deg, #${Math.random().toString(16).substr(-6)}, #${Math.random().toString(16).substr(-6)});
    
25.                 --ts: ${Math.random()}s;
    
26.         `;
    
27.         mplayer.appendChild(ele);
    
28. }
    
29. 
    
30. let lines = document.querySelectorAll('.mline');
    
31. 
    
32. (function update() {
    
33.         lines.forEach( (item,key) => {
    
34.                 item.style.height = `${Math.floor(Math.random() * 120) + 6}px`;
    
35.         });
    
36.         setTimeout(update,500);
    
37. })();
    
38. 
    
39. </script>

复制代码

楼下是运行效果。

马黑黑

红影

黑黑又带来新效果。这个像皇帝的皇冠

红影

等加上音乐，再跟音乐的暂停播放关联，一个新的播放器就出现了

马黑黑

红影 发表于 2022-12-23 10:13
黑黑又带来新效果。这个像皇帝的皇冠

是有点像皇冠

马黑黑

红影 发表于 2022-12-23 10:35
等加上音乐，再跟音乐的暂停播放关联，一个新的播放器就出现了

这个容易吧？

樵歌

又创造性的把走马灯运用到频谱上了

马黑黑

樵歌 发表于 2022-12-23 11:48
又创造性的把走马灯运用到频谱上了

这个挺漂亮的吧

红影

马黑黑 发表于 2022-12-23 10:48
是有点像皇冠

也许不高度降低点，或者升高点，就不太像皇冠了。

红影

马黑黑 发表于 2022-12-23 10:48
这个容易吧？

这个我不行，你肯定容易。

马黑黑

红影 发表于 2022-12-23 15:24
这个我不行，你肯定容易。

其实就是将它和 audio 的关系建立起来：点击它，audio播放或停止播放；audio暂停或播放时，它转动起来、跳跃起来。

如果是响应式的，那会复杂一点：要用 audioContext（音频上下文接口）与 audio 建立关系，act 从 aud 这里获得声波信息，再去驱动频谱。

马黑黑

红影 发表于 2022-12-23 15:23
也许不高度降低点，或者升高点，就不太像皇冠了。

像皇冠有啥不好？

马黑黑

醉美水芙蓉 发表于 2022-12-23 17:57
皇帝的皇冠!好漂亮！

红影

马黑黑 发表于 2022-12-23 16:55
其实就是将它和 audio 的关系建立起来：点击它，audio播放或停止播放；audio暂停或播放时，它转动起来、 ...

这里面说道还真不少

红影

马黑黑 发表于 2022-12-23 16:56
像皇冠有啥不好？

也是哦，像皇冠也挺好的呀

马黑黑

红影 发表于 2022-12-24 10:18
也是哦，像皇冠也挺好的呀

就是

马黑黑

红影 发表于 2022-12-24 10:17
这里面说道还真不少

三者间的关系

红影

马黑黑 发表于 2022-12-24 10:25
就是

我空了去做个帖子送礼去

红影

马黑黑 发表于 2022-12-24 10:26
三者间的关系

只有黑黑能弄得明白，我是总是糊里糊涂的.