css3实现文字渐变效果

css3实现文字渐变效果

在我们学习了css3的渐变后，我们已经可以利用它做一个简单的小特效了。相信大家都看到过字幕“文字上跃动的光芒”吧，先上个效果图吧。

下面附上代码：

HTML部分

从你的全世界路过，让我留在你身边

CSS部分

代码看起来很长，其实就只有几行代码需要我们注重的。
（1）首先我们需要一段文字
（2）然后给文字加上线性渐变 linear-gradient()，里面设置出你想要的的方向、颜色和范围
注意兼容问题
（3）transparent 将文字设置为透明
这时文字会不见了，但是实际上还是占据着文档位置
（4）利用background-clip 属性规定背景的绘制区域被剪裁 到文字

注意：IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。Internet Explorer 8 以及更早的版本不支持 background-clip 属性。
（5）之后我们要设置一个简单的小动画的效果
@keyframes 动画名{} 设置出背景图片初始和终止位置
（6）最后一步就是加上我们的动画
其它的属性就需要我们按照自己的感觉来调整啦
说明一下，这也是我浏览别人博客借鉴的哦，下面附上
原文链接：https://blog.csdn.net/qq_36370731/article/details/78454700