文字渐变css动画

最近在学习一些设计知识，看到为了鼓励用户与网页进行交互，可以设计一些渐变的字体来吸引用户的注意，从而使得用户在读取网页的内容以后，如果用户觉得要么解决了问题，要么获得了知识，要么啥都没有得到，需要鼓励网站的开发人员更加努力，设计出更好的网页。

不多说啦，我们来看看用到的知识：

使用的属性

background-clip 属性规定背景的绘制区域
background: linear-gradient();线性颜色背景
@keyframeskeyframes动画

代码例子

html内容

<div class="text">
    <h1>这是一段渐变的文字</h1>
</div>

css内容

.text{
     background: linear-gradient(90deg, rgba(131,58,180,1) 0%, 
            rgba(253,29,29,1) 33.3%, 
            rgba(252,176,69,1) 66.6%, 
            rgba(131,58,180,1) 100%);
     -webkit-background-clip: text; /*截取背景区域为文字*/
     color: transparent;
     background-size: 300% 100%; /*扩大背景区域*/  
     animation: text 4s infinite linear;
}
@keyframes text{
     0%  { background-position: 0 0;}
   100% { background-position: -150% 0;}
}

使用background: linear-gradient()设置线性背景，通过-webkit-background-clip: text;只截取文字部分的背景，color: transparent;文字颜色透明，文字就会显示出来线性的背景颜色，此时background-size: 300% 100%;扩大横向背景区域。再添加动画动态的显示不同的背景区域，给人视觉上文字颜色在变化，实际上是文字透明背景透过文字在变。