MV中歌词逐字刷新效果经常我们经常遇到，那么我们如何利用css来实现这样的效果呢？

首先，先看一下最终的效果：

接下来简单的分析一下原理：

该效果主要用到的css特性有css3线性渐变linear-gradient，和-webkit-background-clip，-webkit-text-fill-color。

1、我们先设置一个渐变的背景

background-image: linear-gradient(to right, orange, green);

2、我们将渐变的背景改变下，让他颜色分界。

background-image: linear-gradient(to right, orange 50%, green 0%);

3、接下来我们只需要将渐变色背景色填充到文字上面就行了

background-image: linear-gradient(to right, orange 50%, green 0%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

接着动态的改变第一个色值的百分比就可以实现从左到右逐字刷新了。