CSS3_01：玩转文字渐变特效动画，这篇文章满足你，实现方式+案例完整源码
这里后面会陆续出一个关于css动画系列文章，关注布衣前端，实时获取。
在前端开发过程中，有时候需要特别显示页面某个文字特效，这时普通的文字颜色或者阴影已经无法满足需求。此时，css的线性渐变就派上用场了。
文字渐变用到的css技术栈
linear-gradient(0deg, #00DFA2 25%, #F6FA70);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(2px 2px 0.1rem #fff);
animation: variation 5s cubic-bezier(0.87, 0, 0.13, 1) infinite
最终效果动态图片
仔细看，一共五行文字，第一行是普通文字没加任何特效，第二行时线性渐变的角度补间动画效果，从0deg到330deg，顺时针方向的效果，当然可以改成逆时针，呈现另一种效果。最后一行文字是利用盒子背景中心位置产生的特效。
文字渐变原理
第二行文字特效实现方式：定义一个普通的盒子，这里是li标签，里面增加文字，增加filter模糊和设置元素背景background-clip，将文本填充元素背景，设置文本填充颜色为透明，再加上文字间距，背景background配置上线性渐变linear-gradient，至少两种颜色，此时文字渐变效果就完成了，动画部分可选。
css代码
.gradient-text {
background: linear-gradient(0deg, #00DFA2 25%, #F6FA70);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 64px;
font-weight: bold;
letter-spacing: -.5px;
filter: drop-shadow(2px 2px 0.1rem #fff);
animation: variation 5s cubic-bezier(0.87, 0, 0.13, 1) infinite;
}
/* 文字渐变补间动画 */
@keyframes variation {
from {
background: linear-gradient(0deg, #00DFA2 25%, #F6FA70);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
to {
background: linear-gradient(330deg, #00DFA2 25%, #F6FA70);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
注意：这里进行补间动画时，需要写填充元素背景方式，否则不生效。
HTML代码
<ul>
<li class="gradient-text">欢迎关注li>
ul>
附案例全部源码
这里的源码，关于所有线性渐变颜色、角度、颜色占比和动画方式都是可以调节的，打开脑洞，创作无限可能的文字特效。这里起到抛砖引玉作用，不是唯一效果。
感兴趣的小伙伴，可以把源码复制到html文件，用浏览器打开，看看本地效果，还可以自己f12进行调整样式，颜色等等。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字渐变效果title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
justify-content: center;
background-color: #151515;
}
li {
list-style: none;
}
.text-normal,
.gradient-text,
.gradient-text-up,
.gradient-text-half,
.gradient-text-bias {
font-size: 64px;
color: #B4A5A5;
font-weight: bold;
}
.gradient-text {
background: linear-gradient(0deg, #00DFA2 25%, #F6FA70);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -.5px;
filter: drop-shadow(2px 2px 0.1rem #fff);
animation: variation 5s cubic-bezier(0.87, 0, 0.13, 1) infinite;
}
/* 文字渐变补间动画 */
@keyframes variation {
from {
background: linear-gradient(0deg, #00DFA2 25%, #F6FA70);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
to {
background: linear-gradient(330deg, #00DFA2 25%, #F6FA70);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
/* 渐变各占一半 */
.gradient-text-half {
background: linear-gradient(0deg, #14FFEC 50%, #F6C90E 50%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -.5px;
}
/* 斜边各占一半 */
.gradient-text-bias {
background: linear-gradient(347deg, #F6C90E 50%, #14FFEC 50%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -.5px;
}
.gradient-text-up {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 400% 400%;
letter-spacing: -0.5px;
animation: gradientText 20s cubic-bezier(0.32, 0, 0.67, 0) infinite;
}
@keyframes gradientText {
0% {
background-position: 200% 100%;
}
50% {
background-position: -200% 100%;
}
100% {
background-position: 0% -200%;
}
}
style>
head>
<body>
<ul>
<li class="text-normal">普通文字li>
<li class="gradient-text">欢迎文字li>
<li class="gradient-text-half">布衣前端li>
<li class="gradient-text-bias">布衣前端li>
<li class="gradient-text-up">布衣前端li>
ul>
body>
html>
小伙伴们有不明白的地方，评论区见。更多前端文章资源，藏于 布衣前端 vx gongzhonghao