首頁 > web前端 > css教學 > CSS3實現漸層文字效果

CSS3實現漸層文字效果

小云云
發布: 2018-03-03 09:58:55
原創
2344 人瀏覽過

本文主要和大家分享CSS3實現漸變文字效果,我們主要和大家分享兩種方法,希望能幫助大家。

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

#方法一下的文字漸變效果

對應的HTML程式碼如下:


<h2 class="text-gradient" data-text="天赐美妞">天赐美妞</h2>
登入後複製

與HTML相對應的CSS程式碼如下:


.text-gradient {  
    display: inline-block;
    font-family: &#39;微软雅黑&#39;;
    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程式碼可以看出,效果的實現除了「content內容生成技術」以外,主要是使用了mask-image屬性,內容則是「webkit核心瀏覽器下的漸層」了。

二、方法二:background-clip + text-fill-color下的實作

方法二下的文字漸變效果

##此處實作相對上面要簡單些,HTML程式碼如下:


<h2 class="text-gradient">天赐美妞</h2>
登入後複製

與HTML相對應的CSS程式碼如下:


.text-gradient {  
    display: inline-block;
    color: green;
    font-size: 10em;
    font-family: &#39;微软雅黑&#39;;
    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程式碼中關鍵有用的其實就是最後三行:


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屬性相對多些,但是結構簡單,易於控制,顏色的選取與控制也更精確,理解上也更容易理解。我個人是推薦使用方法二的。

三、結語

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

但是,文字漸進本身就是裝飾性的功能,所以,本著漸進增強的原則,我們在實際專案中其實是可以大膽使用的。在不影響原來功能基礎上,幾行CSS程式碼,讓佔有率愈來愈高的Chrome瀏覽器下有更好的視覺體驗效果,何樂而不為呢?

相關推薦:


js實作取得色彩漸層程式碼

javascript計算漸層色實例分享

css3線性漸變入門實例分享#

以上是CSS3實現漸層文字效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板