通过CSS实现文字渐变色的两种方式

5年以前 | 阅读数：437 次 | 编程语言：HTML/CSS

方式一

<html>
<head>
    <meta charset="utf-8">
    <style>

    span {
        background: linear-gradient(to right, red, blue);
        -webkit-background-clip: text;
        color: transparent;
    }
    </style>
</head>

<body>
        <span>前端简单说</span>
</body>
</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>

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8