圆环频谱再设计

马黑黑

马黑黑

<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>

马黑黑

这组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 变量，可以轻松实现正向、斜向圆环频谱效果，其中，正向可朝里、朝 ...

去看了，那个动起来特别漂亮。还是感应的呢，对音乐的来源有要求的吧

红影

这个transform-origin: 100% 100%;没看明白，为什么是定位在这里？

马黑黑

红影 发表于 2025-4-28 13:21
这个transform-origin: 100% 100%;没看明白，为什么是定位在这里？

这个可以慢慢想。

针对对应尺寸长的方向，这个定位非常重要

马黑黑

红影 发表于 2025-4-28 13:08
去看了，那个动起来特别漂亮。还是感应的呢，对音乐的来源有要求的吧

正向频谱效果也是可以的：

马黑博客

红影

马黑黑 发表于 2025-4-28 21:11
这个可以慢慢想。

针对对应尺寸长的方向，这个定位非常重要

好吧，我再仔细琢磨琢磨

红影

马黑黑 发表于 2025-4-28 21:12
正向频谱效果也是可以的：

马黑博客

去看了，是的，这个正向正好和视频背景一致，也很漂亮呢

马黑黑

红影 发表于 2025-4-28 23:06
去看了，是的，这个正向正好和视频背景一致，也很漂亮呢

有点遗憾哈，播放器对音频跨域有要求，音频资源如果跨域的话

马黑黑

红影 发表于 2025-4-28 23:04
好吧，我再仔细琢磨琢磨

你就做个简单的长方形div，然后让它旋转

红影

马黑黑 发表于 2025-4-28 23:25
有点遗憾哈，播放器对音频跨域有要求，音频资源如果跨域的话

是的，音频跨域一直是响应式频谱的难关。

红影

马黑黑 发表于 2025-4-28 23:25
你就做个简单的长方形div，然后让它旋转

不去想了，照着你的设计去做总不会错的

马黑黑

红影 发表于 2025-4-30 10:15
不去想了，照着你的设计去做总不会错的

其实就像跳翻转舞蹈，你是以头为中心呢，还是以脚为中心，还是以腰为中心，跳出来的效果是不一样的，而要什么效果，得看设计初衷，可以从头到尾都是一个坐标点为中心，也可以随机改变，一切按创作思路来办

马黑黑

红影 发表于 2025-4-30 10:14
是的，音频跨域一直是响应式频谱的难关。

俺们的网络管制比较严苛，加上对经济效益的诉求、对知识产权的忌惮，几乎没人想做、敢做像屋舍那样的免费文件仓库，即便是收费的，也会设置种种门槛

红影

马黑黑 发表于 2025-4-30 12:53
其实就像跳翻转舞蹈，你是以头为中心呢，还是以脚为中心，还是以腰为中心，跳出来的效果是不一样的，而要 ...

黑黑说得太对了，定位不同，出来的效果完全不同，这个就很漂亮呢

红影

马黑黑 发表于 2025-4-30 12:56
俺们的网络管制比较严苛，加上对经济效益的诉求、对知识产权的忌惮，几乎没人想做、敢做像屋舍那样的免费 ...

大环境就这样，还好我们是玩，如果有实际需求时，会更麻烦。

马黑黑

红影 发表于 2025-4-30 17:50
大环境就这样，还好我们是玩，如果有实际需求时，会更麻烦。

玩的不痛快呀

马黑黑

红影 发表于 2025-4-30 17:48
黑黑说得太对了，定位不同，出来的效果完全不同，这个就很漂亮呢