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

作者: AileenMoffatt02 分类: css,html 发布时间: 2019-01-19 10:20

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

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!