CSS如何实现炫酷的文字效果
导读：本文共4372.5字符，通常情况下阅读需要15分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： CSS是一门很特殊的语言，你认为CSS只能用来控制网页的结构与样式，但只要你有丰富的想象力，就能创造无限可能。一.渐变文字效果该效果主要利用background-clip:text配合color实现渐变文字效果 首先了解background-clip: text;的意思：以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉。给文本容器设置渐变背景bac... ...
目录
(为您整理了一些要点),点击可以直达。
CSS是一门很特殊的语言，你认为CSS只能用来控制网页的结构与样式，但只要你有丰富的想象力，就能创造无限可能。
一.渐变文字效果
该效果主要利用background-clip:text配合color实现渐变文字效果 首先了解background-clip: text;的意思：以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉。
给文本容器设置渐变背景
background:linear-gradient(90deg,black0%,white50%,black100%);
设置webkit-background-clip属性，以文字作为裁剪区域向外裁剪
-webkit-background-clip:text;background-clip:text;
通过-webkit-animation属性设置动画,即可实现上述效果
-webkit-animation:shining3slinearinfinite;animation:shining3slinearinfinite;
@-webkit-keyframesshining{from{background-position:-500%;}to{background-position:500%;}}@keyframesshining{from{background-position:-500%;}to{background-position:500%;}}样式引用
<html><linkrel="stylesheet"href="./css/neno-text-style.css"><body><pclass="neon">前端实验室</p></body></html>
二.彩虹文字效果（跑马灯）
.text{letter-spacing:0.2rem;font-size:1.5rem;background-image:-webkit-linear-gradient(left,#147B96,#E6D20525%,#147B9650%,#E6D20575%,#147B96);-webkit-text-fill-color:transparent;-webkit-background-clip:text;-webkit-background-size:200%100%;}该效果也是利用background-clip:text和线性渐变属性linear-gradient实现，通过设置区域颜色值实现了彩虹文字的效果。
动态彩虹文字需要设置-webkit-animation属性
-webkit-animation:maskedAnimation4sinfinitelinear;@keyframesmaskedAnimation{0%{background-position:00;}100%{background-position:-100%0;}}CSS样式
.rainbow{letter-spacing:0.2rem;font-size:1.2rem;text-transform:uppercase;}.rainbowspan{animation:rainbow50salternateinfiniteforwards;}@keyframesrainbow{0%{color:#efc68f;}...100%{color:#8fefed;}}<html><head><linkrel="stylesheet"href="./css/rainbow-color-text-style.css"></head><body><divclass="text">【前端实验室】分享前端最新、最实用前端技术</div></body></html>
三.发光文字效果
该效果主要利用text-shadow属性实现。text-shadow属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。
.neon{color:#cce7f8;font-size:2.5rem;-webkit-animation:shining0.5salternateinfinite;animation:shining0.5salternateinfinite;}@-webkit-keyframesshining{from{text-shadow:0010pxlightblue,0020pxlightblue,0030pxlightblue,0040pxskyblue,0050pxskyblue,0060pxskyblue;}to{text-shadow:005pxlightblue,0010pxlightblue,0015pxlightblue,0020pxskyblue,0025pxskyblue,0030pxskyblue;}}<html><head><linkrel="stylesheet"href="./css/neno-text-style.css"></head><body><pclass="neon">【前端实验室】分享前端最新、最实用前端技术</p></body></html>
四.打字机效果
该效果主要是通过改变容器的宽度实现的。
.typing{color:white;font-size:2em;width:21em;height:1.5em;border-right:1pxsolidtransparent;animation:typing2ssteps(42,end),blink-caret.75sstep-endinfinite;font-family:Consolas,Monaco;word-break:break-all;overflow:hidden;}/*打印效果*/@keyframestyping{from{width:0;}to{width:21em;}}/*光标*/@keyframesblink-caret{from,to{border-color:transparent;}50%{border-color:currentColor;}}<html><head><linkrel="stylesheet"href="./css/typing-style.css"></head><body><divclass="typing">【前端实验室】分享前端最新、最实用前端技术</div></html>
white-space:nowrap属性主要是为了保证一行显示，这里考虑到英文字母的显示，去除了该属性，保证不会出现字符间断的情况。
word-break:break-all使英文字符可以一个一个的呈现出来。
animation属性中的steps功能符可以让动画断断续续的执行，而非连续执行。
steps()语法表示:steps(number, position)，其中number关键字表示将动画分为多少段 ；position关键字表示动画是从时间段的开头连续还是末尾连续，支持start和end俩个关键字，含义分别如下：
start:表示直接开始
end:表示戛然而止，为默认值
光标效果是通过box-shadow模拟实现的。 通过上述的这几个属性就可以实现一个简易的打字机效果了~
五.故障风格文字效果
该动画效果比较复杂，主要用到了CSS伪元素、元素自定义属性、蒙版属性、animation动画等等。
<divclass="text"data-text="欢迎关注微信公众号【前端实验室】">欢迎关注微信公众号【前端实验室】</div>
这里主要使用了自定义属性，data-加上自定义的属性名，赋值要显示的文字供伪元素获取到对应的文字。
@keyframesanimation-before{0%{clip-path:inset(0000);}...100%{clip-path:inset(.62em0.29em0);}}@keyframesanimation-after{0%{clip-path:inset(0000);}...100%{clip-path:inset(.29em0.62em0);}}这里设置了两个keyframes，分别为 animation-before 、animation-after，前者是准备给伪元素 before 使用的，后者是给伪元素 after 使用的。
其中clip-path属性是CSS3的新属性蒙版，其中的inset()值表示的是蒙版形状为矩形,定义蒙版的作用区域后通过@keyframes来设置逐帧动画，使蒙版的作用区域在垂直方向一直变化，实现上下抖动的效果。
.text{display:inline-block;font-size:3.5em;font-weight:600;padding:04px;color:white;position:relative;}.text::before{content:attr(data-text);position:absolute;left:-2px;width:100%;background:black;text-shadow:2px0red;animation:animation-before3sinfinitelinearalternate-reverse;}.text::after{content:attr(data-text);position:absolute;left:2px;width:100%;background:black;text-shadow:-2px0blue;animation:animation-after3sinfinitelinearalternate-reverse;}最后我们设置两个伪元素before和after，分别定位到跟父元素同样的位置，然后分别向左、右侧移一点点的距离，制作一个错位的效果，然后都将背景色设置为与父元素背景色一样的颜色，用于遮挡父元素
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">CSS如何实现炫酷的文字效果的详细内容，希望对您有所帮助，信息来源于网络。