前面会有一系列关于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，用元素背景填充文字，设置文字填充颜色为透明，并添加文字宽度，背景配置线性渐变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;}}
注意：这里做补间动画时css3字体效果，需要写填充元素背景方法，否则不生效。
HTML代码
<ul><li class="gradient-text">欢迎关注</li></ul>
附上所有案例源码
这里的源代码可针对所有线性渐变颜色、角度、颜色比例和动画形式进行调整。 开放你的思维，创造无限可能的文字效果。 这里起到的是抛砖引玉的作用，并不是唯一的疗效。
有兴趣的男伙伴，可以将源代码复制到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>
小伙伴们，有什么不明白的地方，评论区见。
发表评论