再来个圈圈频谱

马黑黑

马黑黑

代码分享

1. <style>
   
2. #mydiv { margin: 20px auto; width: 600px; height: 400px; border: 1px solid tan; display: grid; place-items: center; position: relative; --state: paused; }
   
3. #ppwrap { position: absolute; bottom: 50px; width: 120px; height: 120px; display: grid; place-items: center; background: radial-gradient(tan,transparent 45%,transparent 0); cursor: pointer; animation: rot 6s infinite linear var(--state); --deg: 360deg; }
   
4. #ppwrap::before { position: absolute; content: attr(data-tt); white-space: pre; font: normal 14px sans-serif; color: darkgreen; animation: rot 6s infinite linear var(--state); --deg: -360deg; }
   
5. .pinpu { position: absolute; left: 50%; top: 50%; width: 2px; height: 10px; transform-origin: 50% 0; animation: ppgo var(--du) var(--dl) infinite alternate linear var(--state); }
   
6. @keyframes ppgo { to { height: 100px; } }
   
7. @keyframes rot { to { transform: rotate(var(--deg)); } }
   
8. </style>
   
9. 
   
10. <div id="mydiv">
    
11.         <div id="ppwrap" data-tt="00:00
    
12. 00:00"></div>
    
13. </div>
    
14. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2049566571" autoplay loop></audio>
    
15. 
    
16. <script>
    
17. let ppnum = 50;
    
18. (function(){
    
19.         !function(){ Array.from({length: ppnum}).forEach((item,key) => { item = document.createElement('span'); item.className = 'pinpu'; item.style.cssText += ` background: green; transform: rotate(${360 / ppnum * key}deg) translate(40px); --du: ${.2 + Math.random() * .2}s; --dl: -${Math.random()}s; `; ppwrap.appendChild(item); }); }();
    
20.         let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
21.         let toMin = (val)  => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;}
    
22.         aud.addEventListener('pause', mState, false);
    
23.         aud.addEventListener('play', mState, false);
    
24.         aud.addEventListener('timeupdate', () => ppwrap.dataset.tt = toMin(aud.currentTime) + '\n' + toMin(aud.duration));
    
25.         ppwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
    
26. })();
    
27. </script>

复制代码

花飞飞

漂亮，新的频谱效果……我仔细瞧瞧中间那个背景能不能变图片

马黑黑

花飞飞 发表于 2023-7-18 12:27
漂亮，新的频谱效果……我仔细瞧瞧中间那个背景能不能变图片

理论上是可以的：伪元素加背景图，background: url('图片地址')。伪元素的大小要合适，同时伪元素也要设置一下绝对居中：

display: grid; place-items: center;

这样，文本就处在整体的中心。

有点小麻烦，但不是不能做。

马黑黑

花飞飞 发表于 2023-7-18 12:27
漂亮，新的频谱效果……我仔细瞧瞧中间那个背景能不能变图片

还有一个方法，#ppwrap 选择器直接加背景图片，设置背景图片在中央。这可能是比较简单的额，不同大动干戈，你要做的是，使用好 background 的简写属性，在一句代码里摆平一切。

花飞飞

马黑黑 发表于 2023-7-18 12:31
理论上是可以的：伪元素加背景图，background: url('图片地址')。伪元素的大小要合适，同时伪元素也要设 ...

我之前就是简单粗暴，直接把颜色变图片地址~~
处理文字么，类似你那个《漫途》字改完大小之后，上下居中十分麻烦。。
我小站里第一个地球绕太阳的，太阳里面有三行字。。一行的话它就居最上方。。。整不下来

花飞飞

马黑黑 发表于 2023-7-18 12:33
还有一个方法，#ppwrap 选择器直接加背景图片，设置背景图片在中央。这可能是比较简单的额，不同大动干戈 ...

我得先理解，再试试。。。才能知道我行不行。

红影

这个真漂亮，让频谱线分布在圆上了呢。这音乐也极好，那么震撼，让下午的困倦一驱而散

红影

这个用在帖子里肯定很漂亮的

马黑黑

红影 发表于 2023-7-18 13:19
这个用在帖子里肯定很漂亮的

按道理是吧

马黑黑

花飞飞 发表于 2023-7-18 12:39
我得先理解，再试试。。。才能知道我行不行。

不行问度娘

红影

这个代码竟然比之前的还简洁，没想到。
其实越是简洁的越是难看懂呢，transform: rotate(${360 / ppnum * key}deg) translate(40px);看这句，这个圆的直径80吧，看到ppwrap里设置的宽和高120，以为就是圆的直径呢。不知道这个120是派什么用途的

红影

transform-origin: 50% 0;这个也没看懂，基点在上边一半的地方，这个上边在哪都不知道啊

马黑黑

花飞飞 发表于 2023-7-18 12:37
我之前就是简单粗暴，直接把颜色变图片地址~~
处理文字么，类似你那个《漫途》字改完大小之后，上下居中 ...

文本绝对居中的方法之一：

<style>
#mydiv {
        margin: 20px auto;
        width: 600px;
        height: 400px;
        border: 1px solid tan;
        display: grid;
        place-items: center;
        position: relative;
}
</style>

<div id="mydiv">行一</br>行二<br>行三</div>

红色的部分是实现文本绝对居中的关键

马黑黑

红影 发表于 2023-7-18 13:48
transform-origin: 50% 0;这个也没看懂，基点在上边一半的地方，这个上边在哪都不知道啊

频谱条原始位置都是竖立的，设定旋转基点在水平方向的中间、顶部。

频谱条旋转、平移配套布局时就按这样的基点各就各位。

花飞飞

马黑黑 发表于 2023-7-18 13:43
不行问度娘

不问

马黑黑

醉美水芙蓉 发表于 2023-7-18 17:05
先看看学习一下！

辛苦

马黑黑

花飞飞 发表于 2023-7-18 17:03
不问

据说度娘除了广告，也还可以解决一些问题的