怎么用css制作炫酷的3D文字特效

本篇内容主要讲解“怎么用css制作炫酷的3D文字特效”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用css制作炫酷的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$durationinfinite;
}
span{
	transform-style:preserve-3d;
	transform:rotateY(25deg);
	animation:rotate$durationinfiniteease-in;
	
	&:after,&:before{
		content:attr(class);
		color:$gold;
		z-index:-1;
		animation:shadow$durationinfinite;
	}
	&:after{
		transform:translateZ(-16px);
	}
	&:before{
		transform:translateZ(-8px);
	}
}
@keyframesfade{
	//透明度变化
}
@keyframesrotate{
	//字体旋转
}
@keyframesshadow{
//字体颜色变化
}

简单捋一下，上述代码的核心就是：父元素、子元素设置 transform-style: preserve-3d用 span 元素的两个伪元素复制两个相同的字，利用 translateZ() 让它们在 Z 轴间隔一定距离添加简单的旋转、透明度、字体颜色变化可以得到这样一种类似电影开片的标题 3D 动画，其实只有 3 层元素，但是由于角度恰当，视觉上的衔接比较完美，看上去就非常的 3D。为什么上面说需要合理的利用距离、角度及光影呢？还是同一个动画效果，如果动画的初始旋转角度设置的稍微大一点，整个效果就会穿帮：可以看到，在前几帧，能看出来简单的分层结构。又或者，简单调整一下 perspective，设置父容器的 perspective 由 2000px 改为 500px，穿帮效果更为明显：也就是说，在恰当的距离，合适的角度，我们仅仅通过很少的元素，就能在视觉上形成比较不错的 3D 效果。上述的完整代码，你可以猛击这里：CSS 灵感 — 3D 文字出场动画基于，这个技巧，我们简单的改造一下，我们首先替换一下文字效果：

2
0
2
3

这样，我们就可以得到这样一种效果：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-6vwlinear-gradient(transparen免费云主机、域名t20%,rgba(255,255,255,.6));
}

当然，如果对两个伪元素生成的字形成的 3D 文字视觉上的厚度不满意，也可以同步去调整两个伪元素的 transform: translateZ(-6px) 的值，经过一番调整后，我们就简单的复刻了如题图所示的 2023 3D 文字动画效果：到此，相信大家对“怎么用css制作炫酷的3D文字特效”有了更深的了解，不妨来实际操作一番吧！这里是云技术网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: node与gulp不兼容如何解决

这篇文章主要介绍“node与gulp不兼容如何解决”，在日常操作中，相信很多人在node与gulp不兼容如何解决问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”node与gulp不兼容如何解决”的疑惑有所帮助！接下来，请跟着小编一…