旁边会有一系列关于css动画的文章css3源代码，关注布衣后端，实时获取。
在后端开发过程中，有时需要在页面上显示特殊的文字效果。 这时普通的文字颜色或者阴影就不能满足需要了。 这时，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标签，将里面的文字下放，添加滤镜模糊并设置元素背景background-clip，用元素背景填充文字，设置文字填充颜色改为透明，加上文字宽度，背景配置线性渐变，至少两种颜色，那么文字渐变效果就完成了，动画部分可选。
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>
附案例完整源代码
在这里的源代码中，所有线性渐变颜色、角度、颜色比例和动画形式都可以调整，开启你的想象力，为文字效果创造无限可能。 这里起到的是抛砖引玉的作用css3源代码，并不是唯一的疗效。
有兴趣的朋友可以将源代码复制到html文件中，用浏览器打开看看本地效果。 您还可以使用 f12 调整样式、颜色等。
<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>
小伙伴们，有什么不明白的地方评论区见。
