欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時間:2018-03-02 15:54:12   作者:張鑫旭   我要評論
這篇文章主要介紹了CSS3下的漸變文字效果實(shí)現(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代碼可以看出,效果的實(shí)現(xiàn)除了“content內(nèi)容生成技術(shù)”以外,主要是使用了mask-image屬性,內(nèi)容則是“webkit核心瀏覽器下的漸變”了。

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

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

方法二下的文字漸變效果

此處實(shí)現(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)鍵有用的其實(shí)就是最后三行:

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下就更不用說了。

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

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

相關(guān)文章

  • css 進(jìn)度條的文字根據(jù)進(jìn)度漸變的示例代碼

    這篇文章主要介紹了css 進(jìn)度條的文字根據(jù)進(jìn)度漸變的示例代碼,介紹了進(jìn)度條里面的文字需要根據(jù)進(jìn)度的長度而變化,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一
    2018-01-09
  • css3實(shí)現(xiàn)文字掃光漸變動畫效果的示例

    這篇文章主要介紹了css3實(shí)現(xiàn)文字掃光漸變動畫效果的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-11-07
  • CSS3文字背景色漸變過渡特效源碼

    CSS3文字背景色漸變過渡特效源碼是一段實(shí)現(xiàn)了文字顏色漸變過渡效果代碼,本段代碼適應(yīng)于所有網(wǎng)頁使用,有需要的朋友們歡迎前來下載使用
    2017-05-25
  • CSS實(shí)現(xiàn)文字高光水波漸變的動態(tài)效果實(shí)例

    這篇文章介紹的是用CSS實(shí)現(xiàn)文字高光水波漸變的效果,實(shí)現(xiàn)后效果很漂亮,對大家日常開發(fā)很有用處,下面小編整理好分享給大家。有需要的可以參考。
    2016-08-29
  • 一款純css3實(shí)現(xiàn)的顏色漸變按鈕的代碼教程

    今天給大家分享一款純css3實(shí)現(xiàn)的顏色漸變按鈕,這款按鈕的邊框和文字的顏色通過css3實(shí)現(xiàn)兩種顏色的漸變,清新淡雅,效果非常好看,需要的朋友可以參考下
    2014-11-12
  • 使用CSS3的背景漸變Text Gradient 創(chuàng)建文字顏色漸變

    使用CSS3 的背景漸變 -webkit-gradient ,用一個背景漸變的 DIV 代替圖片。下面是實(shí)現(xiàn)效果示例,相比以上方案優(yōu)點(diǎn)是不使用圖片,減小請求量和流量
    2014-08-19
  • CSS 網(wǎng)頁文字漸變效果

    本文介紹的技術(shù)很經(jīng)典,也算是一篇老文章了,相信很多人也都看過,之前神飛有注意到國內(nèi)有些翻譯,但是不全面,這里我就將其完整的翻譯了一下。
    2009-08-03
  • css實(shí)現(xiàn)文字顏色漸變的三種方法

    在web前端開發(fā)過程中,UI設(shè)計(jì)師經(jīng)常會設(shè)計(jì)一些帶漸變文字的設(shè)計(jì)圖,在以前我們只能用png的圖片來代替文字,今天小編給大家?guī)砹薱ss實(shí)現(xiàn)文字顏色漸變的三種方法,一起看看
    2018-11-22

最新評論