CSS3下的漸變文字效果實現(xiàn)示例

發(fā)布時間：2018-03-02 15:54:12 作者：張鑫旭

我要評論

這篇文章主要介紹了CSS3下的漸變文字效果實現(xiàn)示例的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

一、方法一：借助mask-image屬性

如果您手頭上的瀏覽器是Chrome或是Safari，則您可以在demo頁面中看到類似下面的效果：

方法一下的文字漸變效果

相應(yīng)的HTML代碼如下：

<h2 class="text-gradient" data-text="天賜美妞">天賜美妞</h2>

與HTML相對應(yīng)的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)));
}

從CSS代碼可以看出，效果的實現(xiàn)除了“content內(nèi)容生成技術(shù)”以外，主要是使用了mask-image屬性，內(nèi)容則是“webkit核心瀏覽器下的漸變”了。

二、方法二：background-clip + text-fill-color下的實現(xiàn)

如果您手頭上的瀏覽器是Chrome或是Safari，則您可以在demo頁面中看到類似下面的效果：

方法二下的文字漸變效果

此處實現(xiàn)相對上面要簡單些，HTML代碼如下：

<h2 class="text-gradient">天賜美妞</h2>

與HTML相對應(yīng)的CSS代碼如下：

.text-gradient {  
    display: inline-block;
    color: green;
    font-size: 10em;
    font-family: '微軟雅黑';
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
};

CSS代碼中關(guān)鍵有用的其實就是最后三行：

background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

此方法雖然使用的CSS屬性相對多些，但是結(jié)構(gòu)簡單，易于控制，顏色的選取與控制也更精確，理解上也更容易理解。我個人是推薦使用方法二的。

三、結(jié)語

由于目前text-fill-color與mask-image屬性貌似就webkit核心的瀏覽器支持，所以兩個demo頁面只能在Chrome瀏覽器或是Safari瀏覽器下才能看到漸變效果。Firefox瀏覽器下純色，IE下就更不用說了。

但是，文字漸變本身就是裝飾性的功能，所以，本著漸進增強的原則，我們在實際項目中其實是可以大膽使用的。在不影響原來功能基礎(chǔ)上，幾行CSS代碼，讓占有率愈來愈高的Chrome瀏覽器下有更好的視覺體驗效果，何樂而不為呢？

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。