文字渐变色

古城微笑少年丶 2022-05-22 04:07 304阅读 0赞

### 方法一 background-clip + text-fill-color ###

李祺丰·前端

<h2 class="text-gradient" data-text="天赐美妞">天赐美妞</h2> 
    ///与HTML相对应的CSS代码如下：
    
    .text-gradient {  
        display: inline-block;
        font-family: '微软雅黑';
        font-size: 10em;
        position: relative; 
    }  
    
    .text-gradient[data-text]::after { content: attr(data-text); color: green; position: absolute; left: 0; z-index: 2; -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0))); }

### 方法二 mask-image ###

支持浏览器是Chrome或是Safari

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>qiphon</title>
        <style> .text-gradient { display: block; font-size: 10em; position: relative; } .text-gradient[data-text]::after { content: attr(data-text); color: green; 颜色渐变是根据这里的值变化的 position: absolute; z-index: 2; -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#000), to(rgba(0, 0, 0, 0))); } </style>
    </head>
    <body>
    
    <h2 class="text-gradient" data-text="qiphon--前端"></h2> 
    
    </body>
    </html>

文章来源[http://www.zhangxinxu.com/wordpress/2011/04/%E5%B0%8Ftipcss3%E4%B8%8B%E7%9A%84%E6%B8%90%E5%8F%98%E6%96%87%E5%AD%97%E6%95%88%E6%9E%9C%E5%AE%9E%E7%8E%B0/][http_www.zhangxinxu.com_wordpress_2011_04_E5_B0_8Ftipcss3_E4_B8_8B_E7_9A_84_E6_B8_90_E5_8F_98_E6_96_87_E5_AD_97_E6_95_88_E6_9E_9C_E5_AE_9E_E7_8E_B0]  
感谢张鑫旭的分享

[http_www.zhangxinxu.com_wordpress_2011_04_E5_B0_8Ftipcss3_E4_B8_8B_E7_9A_84_E6_B8_90_E5_8F_98_E6_96_87_E5_AD_97_E6_95_88_E6_9E_9C_E5_AE_9E_E7_8E_B0]: http://www.zhangxinxu.com/wordpress/2011/04/%E5%B0%8Ftipcss3%E4%B8%8B%E7%9A%84%E6%B8%90%E5%8F%98%E6%96%87%E5%AD%97%E6%95%88%E6%9E%9C%E5%AE%9E%E7%8E%B0/