魔幻立体球演示

马黑黑 · 发表于 2025-7-19 17:41

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2025-7-19 17:41

代码

<style>
#player {
margin: 100px 0 100px calc(50% - 150px);
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(beige, skyblue);
perspective: 600px;
transform-style: preserve-3d;
}
.ring {
position: absolute;
width: 100%;
height: 100%;
border: thick dashed var(--cc);
border-radius: 50%;
transform: translateZ(-30px) rotateX(var(--ax)) rotateY(var(--ay));
}
</style>
<div id="player" title="播放/暂停"></div>
<script>
var total = 15, rings = [], step = 0.5, isRun = false, raf;
Array.from({length: total}).forEach( (d,k) => {
d = document.createElement('div');
d.className = 'ring';
const a = k * 360 / total;
d.style.cssText += `
--ax: ${a}deg;
--ay: ${a}deg;
--cc: #${Math.random().toString(16).substring(2,8)};
`;
rings.push({ elm: d, a: a });
player.appendChild(d);
});
const animate = () => {
rings.forEach( (d, k) => {
d.a = d.a + step;
d.elm.style.setProperty('--ax', d.a + 'deg');
d.elm.style.setProperty('--ay', d.a + 'deg');
});
raf = requestAnimationFrame(animate);
};
player.onclick = () => {
isRun = !isRun;
isRun ? animate() : cancelAnimationFrame(raf);
};
</script>

复制代码

马黑黑 · 发表于 2025-7-19 17:56

CSS和HTML：

容器元素 player 设置为 300*300 的尺寸，子元素 ring 圆环每一个都和父元素一样大小，然后在X轴、Y轴上均匀旋转，使用的CSS变量分别是 --ax、--ay，它们在后续JS中赋值，--ax 其实等于 --ay，之所以设置两个变量，最初考虑是让这两个值有所不同——这也许是另一种可能。

translateZ(-30px) 仅是在层次上做一点点距离拉开，不要的话默认圆环在Z轴上都是0.

JS相对简单：

变量 total 是圆环总数，rings 是圆环数组，step 是圆环旋转幅度，isRun 是动画运行开关，raf 是请求关键帧动画 requestanimationframe ID。

根据 total 变量创建圆环，圆环使用 div 标签，CSS类名为 ring，圆环的旋转角度平均化，并记录圆环的名称和所分配的角度到数组 rings 中。

动画函数 animate，遍历 rings 数组，改变其角度值，并将·改变的值设置到 --ax 和 --ay 这两个CSS变量，然后通过 requestanimationframe API 递归调用函数自身，形成持续运行动画的效果。

动画可控。作为演示，使用 player 的点击事件来完成：每一次单击它时，动画开关变量取反，即真时变为假、假时变为真，然后依据 isRun 的值决定时播放动画还是取消动画。