css3有很多强大的功能，比如我们经常看到的艺术字，其实可以通过css3的渐变来修改.

background: linear-gradient(to right, red, blue);

这样就是给文件添加一个渐变背景。

还有一种方法就是使用-webkit-mask，这个是给背景做遮盖，通过不同的背景显隐，来控制文字的变化。

<meta charset=“UTF-8” />

<style type=“text/css”>

h1{

position: relative;

color: yellow;

}

h1:before{

content: attr(text);

position: absolute;

z-index: 10;

color:pink;

-webkit-mask:linear-gradient(to left, red, transparent );

}

</style>

</style>

前端简单说

效果如下：