前端工程师通过CSS实现文字渐变色
css3有很多强大的功能，比如我们经常看到的艺术字，其实可以通过css3的渐变来修改.
background: linear-gradient(to right, red, blue);
这样就是给文件添加一个渐变背景。
还有一种方法就是使用-webkit-mask，这个是给背景做遮盖，通过不同的背景显隐，来控制文字的变化。
<!doctype html>
<html>
<head>
<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>
</head>
<body>
<h1 text="前端简单说">前端简单说</h1>
</body>
</html>
效果如下：
评论已关闭!