本文主要讲解“如何利用css制作炫丽的3D文字效果”，有兴趣的同学不妨看一下。 本文介绍的方法简单、快捷、实用。 接下来就让小编带你学习“如何利用css制作炫丽的3D文字效果”！
借助距离、角度和光影创建不同的 3D 效果
这是一个非常有趣的方法。 事实上，生产过程需要更多的调试。
合理利用距离、角度和光影创造不同的3D效果。 看下面的反例，简单的设置了三层字符，让它们在Z轴上间隔一定的距离。
简单的伪代码如下：
C S S 3 D
$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 {
// 字体颜色变化
}
简单来说，上面代码的核心是：
你可以获得这样一个类似于电影开头的标题3D动画。 虽然只有3层元素，但由于角度合适css文字特效，视觉连接比较完美，看起来很有3D感。
为什么说要合理利用距离、角度、光影呢？
还是同样的动画效果，如果动画的初始旋转角度设置大一点，整个效果就会被磨损：
正如您所看到的，在前几帧中，可以看到一个简单的分层结构。 或者，简单调整一下视角，将父容器的视角从2000px设置为500px，穿透的效果更加显着：
也就是说，在适当的距离和适当的角度下，我们只需要很少的元素就可以在视觉上产生比较好的3D效果。
上面的完整代码可以点击这里：CSS灵感--3D文字播放动画
基于这个方法，我们简单修改一下，我们先替换文字疗效：
2 0 2 3
这样，我们就可以得到这样的疗效：
哇，好像是这个意思。 接下来，我们需要将其替换为喜庆的文字效果。 首先大家随意在网上找一下烟花Gif图片，其实是这样的：
我们使用background-clip:text为三层文本添加类似的效果。 核心伪代码如下：
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);
}
}
这样，我们就得到了带有烟花效果的文本css文字特效，还有一点3D效果：
还剩下最后一步了，如何做出反射效果呢？
方法有很多，比较方便的一种是使用 webkit-box-reflect 元素。 只需一行代码即可：
div {
//...
-webkit-box-reflect: below -6vw linear-gradient(transparent 20%, rgba(255,255,255, .6));
}
事实上，如果你对两个伪元素生成的文字生成的3D文本的视觉长度不满意，还可以同步调整两个伪元素的translateZ(-6px)的值。 经过一番调整，我们将简单再现标题图所示的20233D文字动画效果：
至此，相信你已经对“如何利用CSS制作炫丽的3D文字效果”有了更深的了解了，那么我们来做一下实际操作吧！ 这是易速云网站。 更多相关内容，您可以进入相关渠道查询，关注我们，继续学习！
