本文只适用于WEBKIT内核浏览器

用到的属性

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

代码

原理

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