梦幻炫影

马黑黑 · 发表于 2025-7-20 12:12

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

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

x

本帖最后由马黑黑于 2025-7-20 19:01 编辑

马黑黑 · 发表于 2025-7-20 12:12

参考代码

<style>
body { perspective: 1600px; }
#ball {
margin: 100px auto;
width: 200px;
height: 200px;
position: relative;
animation: rot 10s linear infinite;
transform-style: preserve-3d;
}
.ring {
position: absolute;
width: 100%;
height: 100%;
border-radius: 100% 0%;
border: 12px double lightgreen;
background: rgba(0, 180, 90, 0.15);
transform: rotateY(var(--ay));
}
@keyframes rot {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}
</style>
<div id="ball"></div>
<script>
for (var i = 0; i < 360; i += 20) {
var d = document.createElement('div');
d.className = 'ring';
d.style.cssText += `
--ay: ${i}deg;
border-color:
#${Math.random().toString(16).substring(2, 8)}
#${Math.random().toString(16).substring(2, 8)};
`;
ball.appendChild(d);
}
</script>

复制代码

马黑黑 · 发表于 2025-7-20 12:34

本帖最后由马黑黑于 2025-7-20 13:42 编辑

ball 是 ring 的容器。ring 共 360/20 = 18 个，它们因为border-radius的设置长的像长树叶，彼此间隔 20 度绕Y轴做立体旋转，最终形成梦幻之影，无比炫酷。

3d渲染效果的关键：

ball 的父辈元素得有一个设置 perspective 属性，用以创建景深，父辈元素可以是ball的直系父亲，也可是是曾祖父、曾曾祖父甚至备份更高的先辈（例如body）；ball 要设置 transform-style 属性并使用 preserve-3d 做属性值，这样它自身具备了3的转换潜力，其下子元素也拥有3d渲染能力。

绘制18个 div 时间琐碎事，所以使用JS来完成：一个 for 循环，从 0 开始（var i = 0）向 360 高地行进，每一步迈 20 个距离单位（i += 20），这样走 18 步就到目的地了（第一步到达的是 0 号路标，最后一步到达的是 340 号路标）。这个for循环不是简单的“走路”，它是遍历18次，每一次都做 { 。。。 } 里的工作——创建一个 div 元素，该 div 的 class 名称是 'ring'，它的 --ay 变量值是 i 个deg，它的边框是随机双色组合，最后它被添加到 ball 容器中。

如果没有JS，我们得写 18 个 <div class="ring"></div> 标签，还得在 CSS 中额外写 18 个伪类选择器用以给每一个 div 的 --ay 变量赋值。JS高效地完成了这些琐细的事情。