這篇文章給大家介紹使用CSS3怎么實(shí)現(xiàn)一個(gè)漸變文字效果,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
專注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)增城免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動(dòng)了超過千家企業(yè)的穩(wěn)健成長(zhǎng),幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
相應(yīng)的HTML代碼如下:
<h3 class="text-gradient" data-text="天賜美妞">天賜美妞</h3>
與HTML相對(duì)應(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)
此處實(shí)現(xiàn)相對(duì)上面要簡(jiǎn)單些,HTML代碼如下:
<h3 class="text-gradient">天賜美妞</h3>
與HTML相對(duì)應(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;
關(guān)于使用CSS3怎么實(shí)現(xiàn)一個(gè)漸變文字效果就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
分享名稱:使用CSS3怎么實(shí)現(xiàn)一個(gè)漸變文字效果
文章源于:http://muchs.cn/article0/ijdgoo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供云服務(wù)器、網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站設(shè)計(jì)公司、企業(yè)網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)