关于前端:巧用视觉障眼法还原-3D-文字特效

最近群里有这样一个有意思的问题，大家在探讨，应用 CSS 3D 是否实现如下所示的成果：

这里的外围难点在于，如何利用 CSS 实现一个平面的数字？CSS 能做到吗？

不是特地好实现，然而，如果仅仅只是在肯定角度内，利用视觉障眼法，咱们还是能够比拟完满的还原上述成果的。

利用间隔、角度及光影构建不一样的 3D 成果

这是一种很有意思的技巧，在 奇思妙想 CSS 3D 动画 | 仅应用 CSS 能制作出多惊艳的动画？咱们已经介绍过，当然，制作的过程须要比拟多的调试。

正当的利用间隔、角度及光影构建出不一样的 3D 成果。看看上面这个例子，只是简略是设置了三层字符，让它们在 Z 轴上相距肯定的间隔。

简略的伪代码如下：

<div>
  <span class='C'>C</span>
  <span class='S'>S</span>
  <span class='S'>S</span>
  <span></span>
  <span class='3'>3</span>
  <span class='D'>D</span>
</div>

$bright : #AFA695;
$gold : #867862;
$dark : #746853;
$duration : 10s;
div {
    perspective: 2000px;
    transform-style: preserve-3d;
    animation: fade $duration infinite;
}
span {
    transform-style: preserve-3d;
    transform: rotateY(25deg);
    animation: rotate $duration infinite ease-in;
    
    &:after, &:before {content: attr(class);
        color: $gold;
        z-index: -1;
        animation: shadow $duration infinite;
    }
    &:after{transform: translateZ(-16px);
    }
    &:before {transform: translateZ(-8px);
    }
}
@keyframes fade {// 透明度变动}
@keyframes rotate {// 字体旋转}
@keyframes shadow {// 字体色彩变动}

简略捋一下，上述代码的外围就是：

1. 父元素、子元素设置 transform-style: preserve-3d
2. 用 span 元素的两个伪元素复制两个雷同的字，利用 translateZ() 让它们在 Z 轴距离肯定间隔
3. 增加简略的旋转、透明度、字体色彩变动

能够失去这样一种相似电影开片的题目 3D 动画，其实只有 3 层元素，然而因为角度失当，视觉上的连接比拟完满，看上去就十分的 3D。

为什么下面说须要正当的利用间隔、角度及光影呢？

还是同一个动画成果，如果动画的初始旋转角度设置的略微大一点，整个成果就会穿帮：

能够看到，在前几帧，能看进去简略的分层构造。又或者，简略调整一下 perspective，设置父容器的 perspective 由 2000px 改为 500px，穿帮成果更为显著：

也就是说，在失当的间隔，适合的角度，咱们仅仅通过很少的元素，就能在视觉上造成比拟不错的 3D 成果。

上述的残缺代码，你能够猛击这里：CSS 灵感 — 3D 文字出场动画

基于，这个技巧，咱们简略的革新一下，咱们首先替换一下文字效果：

<div>
  <span class='2'>2</span>
  <span class='0'>0</span>
  <span class='2'>2</span>
  <span class='3'>3</span>
</div>

这样，咱们就能够失去这样一种成果：

Wow，有点那个意思了。接下来，咱们须要换上喜庆的文字效果。首先，轻易在网上找一找烟花 Gif 图，兴许是这样：

咱们通过 background-clip: text，给 3 层文字都加上相似这个成果，外围伪代码如下：

span {
    position: relative;
    transform-style: preserve-3d;
    color: transparent;
    background: url(xxx.gif);
    background-clip: text;
    
    &:after, &:before {
        position: absolute;
        content: attr(class);
        color: transparent;
        background: url(xxx.gif);
            background-clip: text;
    }
    
    &:before {transform: translateZ(-12px);
    }
    &:after {transform: translateZ(-6px);
    }
}

这样，咱们就失去了带有烟花成果的文字，以及，一点 3D 成果：

还剩下最初一步，倒影成果怎么制作呢？

办法有很多种，比拟便捷的是应用 webkit-box-reflect 元素。只须要一行代码即可：

div {
    //...
    -webkit-box-reflect: below -6vw linear-gradient(transparent 20%, rgba(255,255,255, .6));
}

当然，如果对两个伪元素生成的字造成的 3D 文字视觉上的厚度不称心，也能够同步去调整两个伪元素的 transform: translateZ(-6px) 的值，通过一番调整后，咱们就简略的复刻了如题图所示的 2023 3D 文字动画成果：

残缺的代码，你能够戳这里：CodePen Demo — CSS 3D 2023

最初

好了，本文到此结束，十分有意思的一个小技巧，心愿本文对你有所帮忙 :)

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。