前端工程师通过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>


效果如下:

image.png