妙用 Background 實(shí)現(xiàn)花式文字效果
本文將講解如何利用 background 系列屬性，巧妙的實(shí)現(xiàn)一些花式的文字效果。通過(guò)本文，你將可以學(xué)到：
- 通過(guò) background-size 與 background-position 實(shí)現(xiàn)酷炫的文字下劃線效果。
- 通過(guò) background-size 與 background-position 以及 background-clip 實(shí)現(xiàn)文字逐個(gè)漸現(xiàn)的效果。
起因
寫(xiě)本文的動(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ì)的主頁(yè)。其中有這樣一個(gè)非常有意思的 Hover 動(dòng)畫(huà)效果：
這個(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 模擬文字的下劃線效果：
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a>Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam</a>, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.</p>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ì)有不一樣的效果，整體連起來(lái)串聯(lián)成一個(gè)整體。
當(dāng)然這個(gè)是最基礎(chǔ)的，巧妙的運(yùn)用 background 的各種屬性，我們實(shí)現(xiàn)各種有意思的效果。
巧妙改變 background-size 與 background-position 實(shí)現(xiàn)文字 hover 動(dòng)效
這里，通過(guò)巧妙改變 background-size 與 background-position 屬性，我們可以實(shí)現(xiàn)一些非常有意思的文字 hover 效果。
先看這樣一個(gè) Demo，核心代碼作用于被 <p> 標(biāo)簽包裹的 <a> 標(biāo)簽之上：
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a>Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam</a>, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.</p>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)，但是一開(kāi)始默認(rèn)它的 background-size: 0 3px，也就是一開(kāi)始是看不到下劃線的，當(dāng) hover 的時(shí)候，改變 background-size: 100% 3px，這個(gè)時(shí)候，就會(huì)有一個(gè) 0 3px 到 100% 3px 的變換，也就是一個(gè)從無(wú)到有的伸展效果。
看看最后的效果：
由于設(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]。
通過(guò) background-size 與 background-position 配合 background-clip 實(shí)現(xiàn)文字的漸現(xiàn)
上述一大段都在圍繞 -- 下劃線。
回歸到本文一開(kāi)始提到的 Gif 效果，我們能否實(shí)現(xiàn)在一段文字中，實(shí)現(xiàn)文字的漸現(xiàn)效果呢？
上述技巧利用的是 background，那么 background 背景色能否改變文字的顏色的？答案是可以的，只需要借助 background-clip。
我們稍微改造下代碼，實(shí)現(xiàn)利用 background-clip 實(shí)現(xiàn) hover 的時(shí)候部分文字逐漸改變顏色：
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<a>Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, </a>
molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.
</p>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;
}看看效果，通過(guò) 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ā)效果）：
<div class="button">Button</div>
<p><a>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></p>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 漸變。
<div class="button">Button</div>
<p><a>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></p>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è)技巧模擬一下文章一開(kāi)始列出的 Gif 的效果：
這個(gè)效果原作者的技巧是：
- 將每個(gè)單詞作為一個(gè)對(duì)象，包裹一個(gè)特殊的 class。
- 利用 animation-delay 將動(dòng)畫(huà)逐漸賦予每個(gè)單詞。
這里，我們將整段文本統(tǒng)一處理，簡(jiǎn)單還原：
<div class="button">Button</div>
<p><a>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></p>/** 動(dòng)畫(huà)核心 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;
}效果如下：
可以看到，由于是整體控制整段文本，效果上沒(méi)有逐個(gè)單詞控制的好，但是優(yōu)點(diǎn)是代碼量非常少。對(duì)于一些簡(jiǎn)單卡片類的 hover 場(chǎng)景，足以。
background-image、background-clip 實(shí)現(xiàn)文字漸現(xiàn)效果[9]。
完美還原題圖效果
當(dāng)然，題圖效果使用純 CSS 也是不在話下的。只不過(guò)就不是簡(jiǎn)單能夠統(tǒng)一處理的了。
這里，我們需要對(duì)每一個(gè)單詞進(jìn)行精細(xì)化的處理，并且使用每個(gè)單詞的偽元素進(jìn)行額外的動(dòng)畫(huà)。
簡(jiǎn)單的結(jié)構(gòu)如下：
<div class="button">Button</div>
<div class="g-wrap"></div>
<p>
<span data-text="Lorem">Lorem</span>
<span data-text="ipsum">ipsum</span>
<span data-text="dolor">dolor</span>
<span data-text="sit">sit</span>
<span data-text="amet">amet</span>
// ... 類似結(jié)構(gòu)
</p>可以看到，每個(gè)單詞都被 <span> 包裹，并且添加了 data-text，方便偽元素拿到當(dāng)前單詞。
接下來(lái)，就是設(shè)定動(dòng)畫(huà)，并且通過(guò)順序給每個(gè) <span> 添加相應(yīng)遞增的 animation-delay 以實(shí)現(xiàn)沒(méi)個(gè)單詞動(dòng)畫(huà)的差異性。核心的偽代碼如下：
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)畫(huà)本身不太復(fù)雜，主要講兩點(diǎn)：
- hover 狀態(tài)下和非 hover 狀態(tài)下的 transition-duration 是不一樣的，是因?yàn)槿∠?hover 過(guò)程中，動(dòng)畫(huà)消失過(guò)程的時(shí)間通常是要求更短的。
- 借助了 SASS 的循環(huán) @for $i from 1 to 21 {} 遞增給每個(gè) span 和它的偽元素添加了遞增的 transition-delay。
最終，我們可以得到如下的結(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。
