这里后面会陆续出一个关于css动画系列文章，关注布衣前端，实时获取。

在前端开发过程中，有时候需要特别显示页面某个文字特效，这时普通的文字颜色或者阴影已经无法满足需求。此时，css的线性渐变就派上用场了。

文字渐变用到的css技术栈

最终效果动态图片 仔细看，一共五行文字，第一行是普通文字没加任何特效，第二行时线性渐变的角度补间动画效果，从0deg到330deg，顺时针方向的效果，当然可以改成逆时针，呈现另一种效果。最后一行文字是利用盒子背景中心位置产生的特效。

第二行文字特效实现方式：定义一个普通的盒子，这里是li标签，里面增加文字，增加filter模糊和设置元素背景background-clip，将文本填充元素背景，设置文本填充颜色为透明，再加上文字间距，背景background配置上线性渐变linear-gradient，至少两种颜色，此时文字渐变效果就完成了，动画部分可选。

注意：这里进行补间动画时，需要写填充元素背景方式，否则不生效。

这里的源码，关于所有线性渐变颜色、角度、颜色占比和动画方式都是可以调节的，打开脑洞，创作无限可能的文字特效。这里起到抛砖引玉作用，不是唯一效果。

感兴趣的小伙伴，可以把源码复制到html文件，用浏览器打开，看看本地效果，还可以自己f12进行调整样式，颜色等等。

小伙伴们有不明白的地方，评论区见。更多前端文章资源，藏于 布衣前端 vx gongzhonghao