论坛 › 马黑黑教程专版 › 梦幻炫影

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

梦幻炫影

本帖最后由 马黑黑 于 2025-7-20 19:01 编辑 <br /><br /><style>
        .papa { position: relative; width: 100%; height: 600px; 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 class="papa">
        <div id="ball"></div>
</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: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高效地完成了这些琐细的事情。

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

未来 CSS 会慢慢有用更多的编程能力，例如，它也会有自己的 if 、for 等，但现在还处在起步阶段，还多重复性或规律性的CSS设置，还需要JS来完成。

红影 发表于 2025-7-20 12:47

这个效果真美，好像很多个蝴蝶颠倒交织用翅膀编织的美丽{:4_187:}

红影 发表于 2025-7-20 12:48

马黑黑 发表于 2025-7-20 12:34
ball 是 ring 的容器。ring 共 360/20=18 个，它们长的像长树叶，间隔 18 度绕Y轴做立体旋转，最终形成梦幻 ...

“间隔 18 度绕Y轴做立体旋转”，这句是不是应该18个，每个间隔20度？

马黑黑 发表于 2025-7-20 13:36

红影 发表于 2025-7-20 12:47
这个效果真美，好像很多个蝴蝶颠倒交织用翅膀编织的美丽

哈哈哈，那就是迷幻蝶影了{:4_170:}

马黑黑 发表于 2025-7-20 13:40

红影 发表于 2025-7-20 12:48
“间隔 18 度绕Y轴做立体旋转”，这句是不是应该18个，每个间隔20度？

笔误吧，不过也差不多{:4_170:}

红影 发表于 2025-7-20 14:47

马黑黑 发表于 2025-7-20 13:36
哈哈哈，那就是迷幻蝶影了

蝶影的说法有点吓人，很容易被看成是谍影{:4_173:}

红影 发表于 2025-7-20 14:48

马黑黑 发表于 2025-7-20 13:40
笔误吧，不过也差不多

这个帖子很奇怪，好像每个回复框点开来都跳到最上头去了。

马黑黑 发表于 2025-7-20 16:04

红影 发表于 2025-7-20 14:47
蝶影的说法有点吓人，很容易被看成是谍影

不一样的，不过也差不多

马黑黑 发表于 2025-7-20 16:06

红影 发表于 2025-7-20 14:48
这个帖子很奇怪，好像每个回复框点开来都跳到最上头去了。

这估计CSS里设置了 body {} 选择器有关，去掉它，给 ball 添加一个父容器，令该父容器设置 perspective。这里只是演示，不管它了。

杨帆 发表于 2025-7-20 16:37

梦幻炫影，惊艳效果，经典分享{:4_190:}

马黑黑 发表于 2025-7-20 16:45

杨帆 发表于 2025-7-20 16:37
梦幻炫影，惊艳效果，经典分享

{:4_191:}

红影 发表于 2025-7-20 18:49

马黑黑 发表于 2025-7-20 16:04
不一样的，不过也差不多

这两个字很接近的啊{:4_173:}

红影 发表于 2025-7-20 18:50

马黑黑 发表于 2025-7-20 16:06
这估计CSS里设置了 body {} 选择器有关，去掉它，给 ball 添加一个父容器，令该父容器设置 perspective。 ...

原来是这个原因，嗯嗯，知道了{:4_187:}

马黑黑 发表于 2025-7-20 19:02

红影 发表于 2025-7-20 18:50
原来是这个原因，嗯嗯，知道了

我给 ball 加了父层元素，将 perspective 属性放在对应选择器内，现在没那个问题了

红影 发表于 2025-7-20 22:07

马黑黑 发表于 2025-7-20 19:02
我给 ball 加了父层元素，将 perspective 属性放在对应选择器内，现在没那个问题了

果然，现在点开回帖，就在原地了。厉害{:4_187:}

马黑黑 发表于 2025-7-20 23:47

红影 发表于 2025-7-20 22:07
果然，现在点开回帖，就在原地了。厉害

这也是论坛的一些机制造成的。它的页面设置的很复杂，有一定的引用和依赖关系。

红影 发表于 2025-7-21 13:41

马黑黑 发表于 2025-7-20 23:47
这也是论坛的一些机制造成的。它的页面设置的很复杂，有一定的引用和依赖关系。

所以对帖子里的代码也有一定的影响。

查看完整版本: 梦幻炫影