圆环频谱再设计
<style>.ma { width: 100%; height: 600px; position: relative; }
#ppcc {
position: absolute;
display: grid;
place-items: center;
left: calc(50% - 50px);
top: calc(50% - 50px);
width: 100px;
height: 100px;
border: 4px solid teal;
border-radius: 50%;
}
.pp {
--deg: 0;
position: absolute;
display: grid;
place-items: center start;
top: calc(50% - 6px);
right: 50px;
width: 100px;
height: 6px;
background: linear-gradient(to left, red 15%, teal 15%, teal);
transform-origin: 100% 100%;
transform: rotate(var(--deg)) translate(0, -50px);
}
.pp::after {
position: absolute;
content: '';
width: 12px;
height: 12px;
background: teal;
}
</style>
<div class="ma">
<div id="ppcc"></div>
</div>
<script>
const total = 10;
for (let i = 0; i < total; i++) {
const pp = document.createElement('span');
pp.className = 'pp';
pp.style.cssText += `
width: ${Math.floor(Math.random() * 100) + 50}px;
--deg: ${360 / total * i}deg;
`;
ppcc.appendChild(pp);
}
</script>
<div id="hEdiv"><pre id="hEpre">
<style>
#ppcc {
position: absolute;
display: grid;
place-items: center;
left: calc(50% - 50px);
top: calc(50% - 50px);
width: 100px;
height: 100px;
border: 4px solid teal;
border-radius: 50%;
}
.pp {
--deg: 0;
position: absolute;
display: grid;
place-items: center start;
top: calc(50% - 6px);
right: 50px;
width: 100px;
height: 6px;
background: linear-gradient(to left, red 15%, teal 15%, teal);
transform-origin: 100% 100%;
transform: rotate(var(--deg)) translate(0, -50px);
}
.pp::after {
position: absolute;
content: '';
width: 12px;
height: 12px;
background: teal;
}
</style>
<div id="ppcc"></div>
<script>
const total = 10;
for (let i = 0; i < total; i++) {
const pp = document.createElement('span');
pp.className = 'pp';
pp.style.cssText += `
width: ${Math.floor(Math.random() * 100) + 50}px;
--deg: ${360 / total * i}deg;
`;
ppcc.appendChild(pp);
}
</script>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
</script> 这组CSS代码，如果通过额外加入一些 CSS 变量，可以轻松实现正向、斜向圆环频谱效果，其中，正向可朝里、朝外，斜向可朝顺、逆时针倾斜，共四中形态。
应用演示：人类遗迹（测试） 频谱条绕环排列原理：
.pp {} 选择器里设置频谱条宽100px、高6px，是横躺的小长方形，经典的玉体横陈设计理念。然后，设置玉体变换中心为 100% 100%，就是最右端、最下端，再令其旋转一定角度、位移一定距离。这是让诸多个玉体不再同一水平线上的操作，还有些也是重要的设置：固定玉体的 left 和 top，唯有如此才能在玉体体长发生变化时它们有一头时固定的，18、19行代码做的是这个事情。固定一头，让玉体一某一坐标点为中心依次旋转一定角度，最终就是绕环站立。
玉体都是舞者，肢体可正可斜，一切在 transform: rotate(deg) translate(x,y) 里，x,y 尤为重要，就是这两个位移坐标点决定了玉体肢体的朝向，可选设置：
translate(0, -50px)
translate(0, 50px);
translate(50px, 0);
translate(-50px, 0);
至于位移多少像素，视父元素宽高尺寸而定，一般取父元素宽高的一半（父元素通常设置为宽=高）。 马黑黑 发表于 2025-4-28 12:26
这组CSS代码，如果通过额外加入一些 CSS 变量，可以轻松实现正向、斜向圆环频谱效果，其中，正向可朝里、朝 ...
去看了，那个动起来特别漂亮。还是感应的呢，对音乐的来源有要求的吧{:4_187:} 这个transform-origin: 100% 100%;没看明白，为什么是定位在这里？ 红影 发表于 2025-4-28 13:21
这个transform-origin: 100% 100%;没看明白，为什么是定位在这里？
这个可以慢慢想。
针对对应尺寸长的方向，这个定位非常重要 红影 发表于 2025-4-28 13:08
去看了，那个动起来特别漂亮。还是感应的呢，对音乐的来源有要求的吧
正向频谱效果也是可以的：
马黑博客
马黑黑 发表于 2025-4-28 21:11
这个可以慢慢想。
针对对应尺寸长的方向，这个定位非常重要
好吧，我再仔细琢磨琢磨{:4_187:} 马黑黑 发表于 2025-4-28 21:12
正向频谱效果也是可以的：
马黑博客
去看了，是的，这个正向正好和视频背景一致，也很漂亮呢{:4_187:} 红影 发表于 2025-4-28 23:06
去看了，是的，这个正向正好和视频背景一致，也很漂亮呢
有点遗憾哈，播放器对音频跨域有要求，音频资源如果跨域的话 红影 发表于 2025-4-28 23:04
好吧，我再仔细琢磨琢磨
你就做个简单的长方形div，然后让它旋转 马黑黑 发表于 2025-4-28 23:25
有点遗憾哈，播放器对音频跨域有要求，音频资源如果跨域的话
是的，音频跨域一直是响应式频谱的难关。 马黑黑 发表于 2025-4-28 23:25
你就做个简单的长方形div，然后让它旋转
不去想了，照着你的设计去做总不会错的{:4_173:} 红影 发表于 2025-4-30 10:15
不去想了，照着你的设计去做总不会错的
其实就像跳翻转舞蹈，你是以头为中心呢，还是以脚为中心，还是以腰为中心，跳出来的效果是不一样的，而要什么效果，得看设计初衷，可以从头到尾都是一个坐标点为中心，也可以随机改变，一切按创作思路来办 红影 发表于 2025-4-30 10:14
是的，音频跨域一直是响应式频谱的难关。
俺们的网络管制比较严苛，加上对经济效益的诉求、对知识产权的忌惮，几乎没人想做、敢做像屋舍那样的免费文件仓库，即便是收费的，也会设置种种门槛 马黑黑 发表于 2025-4-30 12:53
其实就像跳翻转舞蹈，你是以头为中心呢，还是以脚为中心，还是以腰为中心，跳出来的效果是不一样的，而要 ...
黑黑说得太对了，定位不同，出来的效果完全不同，这个就很漂亮呢{:4_187:} 马黑黑 发表于 2025-4-30 12:56
俺们的网络管制比较严苛，加上对经济效益的诉求、对知识产权的忌惮，几乎没人想做、敢做像屋舍那样的免费 ...
大环境就这样，还好我们是玩，如果有实际需求时，会更麻烦。 红影 发表于 2025-4-30 17:50
大环境就这样，还好我们是玩，如果有实际需求时，会更麻烦。
玩的不痛快呀{:4_170:} 红影 发表于 2025-4-30 17:48
黑黑说得太对了，定位不同，出来的效果完全不同，这个就很漂亮呢
{:4_191:}