本文你將可以學(xué)到：通過 Background-size 與 Background-position 實(shí)現(xiàn)酷炫的文字下劃線效果，通過 Background-size 與 Background-position 以及 Background-clip 實(shí)現(xiàn)文字逐個(gè)漸現(xiàn)的效果。

(資料圖片)

本文將講解如何利用background系列屬性，巧妙的實(shí)現(xiàn)一些花式的文字效果。通過本文，你將可以學(xué)到：

起因

寫本文的動(dòng)機(jī)是在于，某天，被這樣一個(gè)標(biāo)題所吸引 –10 Masterfully Designed Websites[1]，其中列舉了 10 個(gè)極具創(chuàng)意的 Web 網(wǎng)站。

其中一個(gè)Red Bull Racing[2]網(wǎng)站，是介紹關(guān)于 F1 紅牛車隊(duì)的主頁。其中有這樣一個(gè)非常有意思的 Hover 動(dòng)畫效果：

這個(gè)文字的 hover 出現(xiàn)效果，看似簡(jiǎn)單，其實(shí)想要完全實(shí)現(xiàn)它，僅僅依靠 CSS 是非常復(fù)雜的，其中一個(gè)比較難的地方在于 —如何讓一個(gè)效果，逐漸作用給整段文字中的部分，而不是一次將整個(gè)效果賦予整段文本。

利用 background 實(shí)現(xiàn)文字的下劃線效果

到這里，我想起了之前在這篇文章中 –CSS 文字裝飾 text-decoration & text-emphasis[3]，我介紹的一種使用 background 模擬下劃線的效果。

看個(gè)簡(jiǎn)單的 DEMO，使用background模擬文字的下劃線效果：

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.

p {    width: 600px;    font-size: 24px;    color: #666;}a {    background: linear-gradient(90deg, #0cc, #0cc);    background-size: 100% 3px;    background-repeat: no-repeat;    background-position: 100% 100%;    color: #0cc;}

使用background模擬文字的下劃線效果，效果圖如下：

又或者，使用background模擬虛線下劃線：

a {    background: linear-gradient(90deg, #0cc 50%, transparent 50%, transparent 1px);    background-size: 10px 2px;    background-repeat: repeat-x;    background-position: 100% 100%;}

CodePen Demo — 使用 background 模擬下劃線與虛線下劃線[4]。

這里的一個(gè)核心在于background 在 display: inline 和 display: block 下的不同表現(xiàn)。

什么意思呢？區(qū)別很明顯，塊級(jí)元素的背景整體是一個(gè)漸變整體，而內(nèi)聯(lián)元素的每一行都是會(huì)有不一樣的效果，整體連起來串聯(lián)成一個(gè)整體。

當(dāng)然這個(gè)是最基礎(chǔ)的，巧妙的運(yùn)用background的各種屬性，我們實(shí)現(xiàn)各種有意思的效果。

巧妙改變background-size與background-position實(shí)現(xiàn)文字 hover 動(dòng)效

這里，通過巧妙改變background-size與background-position屬性，我們可以實(shí)現(xiàn)一些非常有意思的文字 hover 效果。

先看這樣一個(gè) Demo，核心代碼作用于被

標(biāo)簽包裹的標(biāo)簽之上：

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.

a {    background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff);    background-size: 0 3px;    background-repeat: no-repeat;    background-position: 0 100%;    transition: 1s all;    color: #0cc;}a:hover {    background-size: 100% 3px;    color: #000;}

我們雖然，設(shè)定了background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff)，但是一開始默認(rèn)它的background-size: 0 3px，也就是一開始是看不到下劃線的，當(dāng) hover 的時(shí)候，改變background-size: 100% 3px，這個(gè)時(shí)候，就會(huì)有一個(gè)0 3px到100% 3px的變換，也就是一個(gè)從無到有的伸展效果。

看看最后的效果：

由于設(shè)定的background-position是0 100%，如果，設(shè)定的background-position是100% 100%，我們可以得到一個(gè)反向的效果：

// 其他都保持一致，只改變 background-position，從 0 100% 改為 100% 100%a {    ...    background-position: 100% 100%;    ...}

再看看效果，你可以對(duì)比著上面的動(dòng)圖看看具體的差異點(diǎn)在哪：

CodePen Demo — background underline animation[5]。

OK，如果我們使用background實(shí)現(xiàn)兩條重疊的下劃線，再利用上述的兩個(gè)不同的background-position值，我們就可以得到一個(gè)更有意思的下劃線 hover 效果。

CSS 代碼示意，注意看兩條使用 background 模擬的下劃線的background-position的值是不一樣的：

a {    background:         linear-gradient(90deg, #0cc, #0cc),        linear-gradient(90deg, #ff3c41, #fc0, #8500d8);    background-size: 100% 3px, 0 3px;    background-repeat: no-repeat;    background-position: 100% 100%, 0 100%;    transition: 0.5s all;    color: #0cc;}a:hover {    background-size: 0 3px, 100% 3px;    color: #000;}

可以得到這樣一種效果，其實(shí)每次 hover， 都有兩條下劃線在移動(dòng)：

CodePen Demo — background underline animation[6]。

通過background-size與background-position配合background-clip實(shí)現(xiàn)文字的漸現(xiàn)

上述一大段都在圍繞 –下劃線。

回歸到本文一開始提到的 Gif 效果，我們能否實(shí)現(xiàn)在一段文字中，實(shí)現(xiàn)文字的漸現(xiàn)效果呢？

上述技巧利用的是background，那么background背景色能否改變文字的顏色的？答案是可以的，只需要借助background-clip。

我們稍微改造下代碼，實(shí)現(xiàn)利用background-clip實(shí)現(xiàn) hover 的時(shí)候部分文字逐漸改變顏色：

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.

p {    color: #666;    cursor: pointer;}a {        background: linear-gradient(90deg, #fc0, #fc0);    background-size: 0 100px;    background-repeat: no-repeat;    background-position: 0 100%;    background-clip: text;    transition: .6s all linear;}p:hover a {    background-size: 100% 100%;    color: transparent;}

看看效果，通過background-clip: text的遮罩裁剪，我們將background: linear-gradient(90deg, #fc0, #fc0)背景色作用給了文字，同時(shí)利用color: transparent讓文字展示出背景色的色值：

CodePen Demo — background-size 與 background-position 以及 background-clip 實(shí)現(xiàn)文字逐個(gè)漸現(xiàn)[7]。

當(dāng)然，稍微對(duì)上述代碼變形，我們就可以演化出幾種不同的效果。

實(shí)現(xiàn)整段文字的漸現(xiàn) – 從透明到出現(xiàn)

第一種就是從透明到有顏色，逐漸展現(xiàn)，這里我們只需要讓 color 一直是 transparent 即可（下述效果借助了一個(gè)按鈕去觸發(fā)效果）：

Button
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.

a {        background: linear-gradient(90deg, #fc0, #fc0);    background-size: 0 100px;    background-repeat: no-repeat;    background-position: 0 100%;    color: transparent;    background-clip: text;}.button:hover ~ p a {    transition: .8s all linear;    background-size: 0 100px, 100% 100%;}

效果如下：

實(shí)現(xiàn)整段文字的漸現(xiàn) – 從一種顏色到另外一種顏色

還可以實(shí)現(xiàn)文字從一種顏色到另外一種顏色的逐個(gè)轉(zhuǎn)變，只需要添加多一層background-image漸變。

Button
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.

a {        background:         linear-gradient(90deg, #999, #999),        linear-gradient(90deg, #fc0, #fc0);    background-size: 100% 100%, 0 100px;    background-repeat: no-repeat;    background-position: 100% 100%, 0 100%;    color: transparent;    background-clip: text;}.button:hover ~ p a {    transition: .8s all linear;    background-size: 0 100px, 100% 100%;}

這里需要解釋一下，雖然設(shè)置了color: transparent，但是文字默認(rèn)還是有顏色的，默認(rèn)的文字顏色，是由第一層漸變賦予的background: linear-gradient(90deg, #999, #999), linear-gradient(90deg, #fc0, #fc0)，也就是這一層：linear-gradient(90deg, #999, #999)。

當(dāng) hover 觸發(fā)時(shí)，linear-gradient(90deg, #999, #999)這一層漸變逐漸消失，而另外一層 linear-gradient(90deg, #fc0, #fc0)` 逐漸出現(xiàn)，借此實(shí)現(xiàn)上述效果。

CodePen — background-clip 文字漸現(xiàn)效果[8]。

簡(jiǎn)單模擬題圖效果

這里，我們簡(jiǎn)單利用這個(gè)技巧模擬一下文章一開始列出的 Gif 的效果：

這個(gè)效果原作者的技巧是：

這里，我們將整段文本統(tǒng)一處理，簡(jiǎn)單還原：

Button
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.

/** 動(dòng)畫核心 background、line-height、opacity **/a {        background:         linear-gradient(90deg, #ff5722, #ff5722),        linear-gradient(90deg, #aaa, #aaa);    background-size: 100% 100%, 0 100px;    background-repeat: no-repeat;    background-position: 100% 100%, 0 100%;    cursor: pointer;    color: transparent;    background-clip: text;    line-height: 3;    opacity: 0;}.button:hover ~ p a {    transition: 1.2s background .3s ease-out, .8s line-height ease-out, .6s opacity ease-in;    background-size: 0 100px, 100% 100%;    color: transparent;    line-height: 1;    opacity: 1;}/ ** 簡(jiǎn)單控制半透明黑色遮罩出現(xiàn) **/a::before {    content: "";    position: fixed;    background: rgba(0, 0, 0, .8);    top: 0;    left: 0;    right: 0;    bottom: 0;    z-index: -1;    transition: .3s all linear;    opacity: 0;}.button:hover ~ p a::before {    opacity: 1;}

效果如下：

可以看到，由于是整體控制整段文本，效果上沒有逐個(gè)單詞控制的好，但是優(yōu)點(diǎn)是代碼量非常少。對(duì)于一些簡(jiǎn)單卡片類的 hover 場(chǎng)景，足以。

background-image、background-clip 實(shí)現(xiàn)文字漸現(xiàn)效果[9]。

完美還原題圖效果

當(dāng)然，題圖效果使用純 CSS 也是不在話下的。只不過就不是簡(jiǎn)單能夠統(tǒng)一處理的了。

這里，我們需要對(duì)每一個(gè)單詞進(jìn)行精細(xì)化的處理，并且使用每個(gè)單詞的偽元素進(jìn)行額外的動(dòng)畫。

簡(jiǎn)單的結(jié)構(gòu)如下：

Button
    Lorem     ipsum     dolor     sit     amet     // ... 類似結(jié)構(gòu)     

可以看到，每個(gè)單詞都被包裹，并且添加了data-text，方便偽元素拿到當(dāng)前單詞。

接下來，就是設(shè)定動(dòng)畫，并且通過順序給每個(gè)添加相應(yīng)遞增的animation-delay以實(shí)現(xiàn)沒個(gè)單詞動(dòng)畫的差異性。核心的偽代碼如下：

p {    position: relative;    width: 500px;    overflow: hidden;}p span {    position: relative;    display: inline-block;    opacity: 0;    transform: translateY(15px) translateZ(0);    transition-property: transform, opacity;    transition-duration: .3s, .2s;}.button:hover ~ p span {    opacity: 1;    color: #ddd;    transform: translateY(0) translateZ(0);    transition-duration: 1s, .2s;}p span:after,p span:before {    position: absolute;    content: attr(data-text);    top: 0;    left: 0;    z-index: 1;    transform: translateZ(0);}p span:after {    color: #e62541;    transition-property: opacity;    transition-duration: .1s;}.button:hover ~ p span:after {    opacity: 0;    transition-property: opacity;    transition-duration: .4s;}@for $i from 1 to 21 {    p span:nth-child(#{$i}) {        transition-delay: #{$i * 0.04}s;                &::after {            transition-delay: #{$i * 0.04 + 0.2}s;        }    }}

其實(shí)動(dòng)畫本身不太復(fù)雜，主要講兩點(diǎn)：

最終，我們可以得到如下的結(jié)果：

完整的代碼，你可以猛戳 –CSS 靈感 – 利用 animation-delay 實(shí)現(xiàn)文字漸現(xiàn)效果[10]。

最后

好了，本文到此結(jié)束，希望對(duì)你有幫助 :)

參考資料

[110 Masterfully Designed Websites:https://medium.com/@MonteVerdeVT/10-masterfully-designed-websites-f999112e2fa9。

[2]Red Bull Racing:https://thenewmobileworkforce.imm-g-prod.com/back-at-hq。

[3]CSS 文字裝飾 text-decoration & text-emphasis:https://github.com/chokcoco/iCSS/issues/103。

[4]CodePen Demo — 使用 background 模擬下劃線與虛線下劃線:https://codepen.io/Chokcoco/pen/YzNQKwm。

[5]CodePen Demo — background underline animation:https://codepen.io/Chokcoco/pen/QWdgLwp。

[6]CodePen Demo — background underline animation:https://codepen.io/Chokcoco/pen/MWJogjQ。

[7]CodePen Demo — background-size 與 background-position 以及 background-clip 實(shí)現(xiàn)文字逐個(gè)漸現(xiàn):https://codepen.io/Chokcoco/pen/qBjmvdq?editors=1100。

[8]CodePen — background-clip 文字漸現(xiàn)效果:https://codepen.io/Chokcoco/pen/XWgpyqz。

[9]background-image、background-clip 實(shí)現(xiàn)文字漸現(xiàn)效果:https://codepen.io/Chokcoco/pen/abwWMJm。

[10]CSS 靈感 – 利用 animation-delay 實(shí)現(xiàn)文字漸現(xiàn)效果:https://csscoco.com/inspiration/#/./animation/animation-delay-control-text-effect。