再来个圈圈频谱
<style>#mydiv { margin: 20px auto; width: 600px; height: 400px; border: 1px solid tan; display: grid; place-items: center; position: relative; --state: paused; }
#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; }
#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; }
.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); }
@keyframes ppgo { to { height: 100px; } }
@keyframes rot { to { transform: rotate(var(--deg)); } }
</style>
<div id="mydiv">
<div id="ppwrap" data-tt="00:00 00:00"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2049566571" autoplay loop></audio>
<script>
let ppnum = 50;
(function(){
!function(){ Array.from({length: ppnum}).forEach((item,key) => { item = document.createElement('span'); item.className = 'pinpu'; item.style.cssText += ` background: green; //#${Math.random().toString(16).substr(-6)}; transform: rotate(${360 / ppnum * key}deg) translate(40px); --du: ${.2 + Math.random() * .2}s; --dl: -${Math.random()}s; `; ppwrap.appendChild(item); }); }();
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
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;}
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => ppwrap.dataset.tt = toMin(aud.currentTime) + '\n' + toMin(aud.duration));
ppwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
本帖最后由 马黑黑 于 2023-7-18 12:24 编辑
代码分享
<style>
#mydiv { margin: 20px auto; width: 600px; height: 400px; border: 1px solid tan; display: grid; place-items: center; position: relative; --state: paused; }
#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; }
#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; }
.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); }
@keyframes ppgo { to { height: 100px; } }
@keyframes rot { to { transform: rotate(var(--deg)); } }
</style>
<div id="mydiv">
<div id="ppwrap" data-tt="00:00
00:00"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2049566571" autoplay loop></audio>
<script>
let ppnum = 50;
(function(){
!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); }); }();
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
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;}
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => ppwrap.dataset.tt = toMin(aud.currentTime) + '\n' + toMin(aud.duration));
ppwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
漂亮，新的频谱效果……我仔细瞧瞧中间那个背景能不能变图片{:4_170:} 花飞飞 发表于 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('图片地址')。伪元素的大小要合适，同时伪元素也要设 ...
我之前就是简单粗暴，直接把颜色变图片地址~~
处理文字么，类似你那个《漫途》字改完大小之后，上下居中十分麻烦。。
我小站里第一个地球绕太阳的，太阳里面有三行字。。一行的话它就居最上方。。。整不下来{:4_170:} 马黑黑 发表于 2023-7-18 12:33
还有一个方法，#ppwrap 选择器直接加背景图片，设置背景图片在中央。这可能是比较简单的额，不同大动干戈 ...
我得先理解，再试试。。。才能知道我行不行。{:4_170:} 这个真漂亮，让频谱线分布在圆上了呢。这音乐也极好，那么震撼，让下午的困倦一驱而散{:4_173:}{:4_199:} 这个用在帖子里肯定很漂亮的{:4_208:} 红影 发表于 2023-7-18 13:19
这个用在帖子里肯定很漂亮的
按道理是吧 花飞飞 发表于 2023-7-18 12:39
我得先理解，再试试。。。才能知道我行不行。
不行问度娘 这个代码竟然比之前的还简洁，没想到。
其实越是简洁的越是难看懂呢，transform: rotate(${360 / ppnum * key}deg) translate(40px);看这句，这个圆的直径80吧，看到ppwrap里设置的宽和高120，以为就是圆的直径呢。不知道这个120是派什么用途的{:4_203:} transform-origin: 50% 0;这个也没看懂，基点在上边一半的地方，这个上边在哪都不知道啊{:4_173:} 花飞飞 发表于 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
不问
据说度娘除了广告，也还可以解决一些问题的