首頁 > web前端 > css教學 > 主體

CSS Tips段落每行漸層文字效果的實作方法

小云云
發布: 2018-03-09 10:46:44
原創
1635 人瀏覽過

今天小編在Codepen上看到一個CSS寫的效果。一個段落的每行文字是漸變效果。對於單行文字或單字實現漸變填滿效果並不是什麼奇怪的事情,不過對於一個段落的每一行實現一個文字漸變​​填滿的效果。估計還是會令很多人感到好奇。如果你是其中好奇的一員,請繼續往下閱讀,一探其中之究竟!

目標效果

今天的目標效果是實現下面這樣的效果,或是說了解這種效果製作的小技巧:

CSS Tips段落每行漸層文字效果的實作方法

#看到上面的效果,我想很多人首先會想到的就是background-clip:text、color:transparent和linear-gradient來完成。那麼事實是這樣嗎?

如何完成一個段落的每行文字漸變效果

了解CSS的同學都清楚,使用:

background-image: linear-gradient(to right, deeppink, dodgerblue);
-webkit-background-clip: text;
color: transparent;
登入後複製

就可以輕易的實現一個文本的漸變填充效果。例如下面這個範例:

CSS Tips段落每行漸層文字效果的實作方法

來做個小實驗,如果文字不是一個單字或單行而是整個段落,效果會是如何?

CSS Tips段落每行漸層文字效果的實作方法

效果似乎也是完美的。如果漸變效果參數換一換,漸變效果是斜角:

background-image: linear-gradient(135deg, deeppink, dodgerblue);
登入後複製

看看兩者的效果:

CSS Tips段落每行漸層文字效果的實作方法

##仔細一看,兩個效果還是有差異的。先來看看同一個大小容器(本範例中的p元素,其大小是765px * 165px),對於兩種不同的漸變效果,先來看to right的填充效果:

CSS Tips段落每行漸層文字效果的實作方法

#再來看135deg的填充效果:

CSS Tips段落每行漸層文字效果的實作方法

到這裡了,你或許就知道前面的範例有何不同?而且也知道其中的原因是什麼?如果我們想要各種漸層對於段落的每行填充效果都相同,我們該怎麼實現?在實作之前,先簡單的總結:

在linear-gradient中使用to right或to left,不管是單字、單行文本或多行文本,得到的文字填滿效果都會一致。但對於其他漸變的角度參數,那麼多行文字填入中的每行效果就會有差異。

回到正題?怎麼實現多行而且不管任何填滿角度都有相同效果?實現這個效果有一個關鍵屬性:box-decoration-break。簡單的說一下,box-decoration-break屬性有兩個屬性值:slice和clone,其對應的效果如下:

用於一個段落中,其效果如下:

CSS Tips段落每行漸層文字效果的實作方法

是不是離我們的目標越來越近了。那麼把這個屬性box-decoration-break:clone用於我們的範例:

background-image: linear-gradient(135deg, deeppink, dodgerblue);
background-clip: text;
-webkit-background-clip: text;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
color: transparent;
登入後複製
效果如下:

CSS Tips段落每行漸層文字效果的實作方法

咱們來驗證一下是不是符合我們預期想要的效果:

CSS Tips段落每行漸層文字效果的實作方法

小技巧:box-decoration-break運用於行內元素,並且配上對應的line-height,讓行與行之間有一定的間距。

回過頭來,咱們看看,使用box-decoration-break是在行內元素和區塊元素之間的區別:

CSS Tips段落每行漸層文字效果的實作方法

是不是很完美。如果喜歡自己試試看。

相關建議:


javascript計算漸層色實例分享

html5 canvas繪製放射性漸層效果程式碼實例

div+css背景漸層程式碼範例

以上是CSS Tips段落每行漸層文字效果的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!