前端工程师通过CSS实现文字渐变色

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

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

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

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

<!doctype html>

<html>

<head>

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>

</head>

<body>

<h1 text="前端简单说">前端简单说</h1>

</body>

</html>

效果如下：

You Missed