多行文本下的文字漸隱消失術(shù)
本文將探討一下，在多行文本情形下的一些有意思的文字動(dòng)效。
多行文本，相對(duì)于單行文本，場(chǎng)景會(huì)復(fù)雜一些，但是在實(shí)際業(yè)務(wù)中，多行文本也是非常之多的，但是其效果處理比起單行文本會(huì)更困難。
單行與多行文本的漸隱
首先，我們來(lái)看這樣一個(gè)例子，我們要實(shí)現(xiàn)這樣一個(gè)單行文本的漸隱：
使用 mask，可以輕松實(shí)現(xiàn)這樣的效果，只需要：
<p>Lorem ipsum dolor sit amet consectetur.</p>
p {
mask: linear-gradient(90deg, #fff, transparent);
}
但是，如果，場(chǎng)景變成了多行呢？我們需要將多行文本最后一行，實(shí)現(xiàn)漸隱消失，并且適配不同的多行場(chǎng)景：
這個(gè)就會(huì)稍微復(fù)雜一點(diǎn)點(diǎn)，但是也是有多種方式可以實(shí)現(xiàn)的。
首先我們來(lái)看一下使用 background 的方式。
使用 background 實(shí)現(xiàn)
這里會(huì)運(yùn)用到一個(gè)技巧，就是 display: inline 內(nèi)聯(lián)元素的 background 展現(xiàn)形式與 display: block 塊級(jí)元素（或者 inline-block、flex、grid）不一致。
簡(jiǎn)單看個(gè)例子：
<p>Lorem .....</p>
<a>Lorem .....</a>
這里需要注意，<p> 元素是塊級(jí)元素，而 <a> 是內(nèi)聯(lián)元素。
我們給它們統(tǒng)一添加上一個(gè)從綠色到藍(lán)色的漸變背景色：
p, a {
background: linear-gradient(90deg, blue, green);
}
看看效果：
什么意思呢？區(qū)別很明顯，塊級(jí)元素的背景整體是一個(gè)漸變整體，而內(nèi)聯(lián)元素的每一行都是會(huì)有不一樣的效果，整體連起來(lái)串聯(lián)成一個(gè)整體。
基于這個(gè)特性，我們可以構(gòu)造這樣一種布局：
<p><a>Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam</a></p>
p {
position: relative;
width: 400px;
}
a {
background: linear-gradient(90deg, transparent, transparent 70%, #fff);
background-repeat: no-repeat;
cursor: pointer;
color: transparent;
&::before {
content: "Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam";
position: absolute;
top: 0;
left: 0;
color: #000;
z-index: -1;
}
}
這里需要解釋一下：
- 為了利用到實(shí)際的內(nèi)聯(lián)元素的background 的特性，我們需要將實(shí)際的文本包裹在內(nèi)聯(lián)元素<a> 內(nèi)。
- 實(shí)際的文本，利用了opacity: 0 進(jìn)行隱藏，實(shí)際展示的文本使用了<a> 元素的偽元素，并且將它的層級(jí)設(shè)置為-1，目的是讓父元素的背景可以蓋過(guò)它。
- <a> 元素的漸變?yōu)閺耐该鞯桨咨?，利用它去遮住下面的?shí)際用偽元素展示的文字，實(shí)現(xiàn)文字的漸隱。
這樣，我們就能得到這樣一種效果：
這里，<a> 元素的漸變?yōu)閺耐该鞯桨咨煤竺娴陌咨饾u遮住文字。
如果我將漸變改為從黑色到白色（為了方便理解，漸變的黑色和白色都帶上了一些透明），你能很快的明白這是怎么回事：
a {
background: linear-gradient(90deg, rgba(0,0,0, .8), rgba(0,0,0, .9) 70%, rgba(255, 255, 255, .9));
}
完整的代碼，你可以戳這里：CodePen Demo -- Text fades away[1]。
當(dāng)然，這個(gè)方案有很多問(wèn)題，譬如利用了 z-index: -1，如果父容器設(shè)置了背景色，則會(huì)失效，同時(shí)不容易準(zhǔn)確定位最后一行。因此，更好的方式是使用 mask 來(lái)解決。
使用 mask 實(shí)現(xiàn)
那么，如果使用 mask 的話，問(wèn)題，就會(huì)變得簡(jiǎn)單一些，我們只需要在一個(gè) mask 中，實(shí)現(xiàn)兩塊 mask 區(qū)域，一塊用于準(zhǔn)確控制最后一行，一塊用于控制剩余部分的透明。
也不需要特殊構(gòu)造 HTML：
<p>Lorem ipsum dolor sit amet ....</p>
p {
width: 300px;
padding: 10px;
line-height: 36px;
mask:
linear-gradient(270deg, transparent, transparent 30%, #000),
linear-gradient(270deg, #000, #000);
mask-size: 100% 46px, 100% calc(100% - 46px);
mask-position: bottom, top;
mask-repeat: no-repeat;
}
效果如下：
核心在于整個(gè) mask 相關(guān)的代碼，正如上面而言的，mask 將整個(gè)區(qū)域分成了兩塊進(jìn)行控制：
在下部分這塊，我們利用 mask 做了從右向左的漸隱效果。并且利用了 mask-position 定位，以及 calc 的計(jì)算，無(wú)論文本都多少行，都是適用的！需要說(shuō)明的是，這里的 46px 的意思是單行文本的行高加上 padding-bottom 的距離。可以適配任意行數(shù)的文本：
完整的代碼，你可以戳這里：CodePen Demo -- Text fades away 2[2]。
添加動(dòng)畫(huà)效果
好，看完靜態(tài)的，我們?cè)賮?lái)實(shí)現(xiàn)一種**動(dòng)態(tài)的文字漸隱消失。
整體的效果是當(dāng)鼠標(biāo) Hover 到文字的時(shí)候，整個(gè)文本逐行逐漸消失。像是這樣：
這里的核心在于，需要去適配不同的行數(shù)，不同的寬度，而且文字是一行一行的進(jìn)行消失。
這里核心還是會(huì)運(yùn)用上內(nèi)聯(lián)元素 background 的特性。在 妙用 background 實(shí)現(xiàn)花式文字效果[3] 這篇文章中，我們介紹了這樣一種技巧。
實(shí)現(xiàn)整段文字的漸現(xià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>
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)效果[4]。
好，我們可以借鑒這個(gè)技巧，去實(shí)現(xiàn)文字的漸隱消失。一層為實(shí)際的文本，而另外一層是進(jìn)行動(dòng)畫(huà)的遮罩，進(jìn)行動(dòng)畫(huà)的這一層，本身的文字設(shè)置為 color: transparent，這樣，我們就只能看到背景顏色的變化。
大致的代碼如下：
<p>
<a class="word">Mollitia nostrum placeat consequatur deserunt.</a>
<a class="pesudo">Mollitia nostrum placeat consequatur deserunt.</a>
</p>
p {
width: 500px;
}
.word {
position: absolute;
top: 0;
left: 0;
color: transparent;
color: #000;
}
.pesudo {
position: relative;
background: linear-gradient(90deg, transparent, #fff 20%, #fff);
background-size: 0 100%;
background-repeat: no-repeat;
background-position: 100% 100%;
transition: all 3s linear;
color: transparent;
}
p:hover .pesudo,
p:active .pesudo{
background-size: 500% 100%;
}
其中，.word 為實(shí)際在底部，展示的文字層，而 pesudo 為疊在上方的背景層，hover 的時(shí)候，觸發(fā)上方元素的背景變化，逐漸遮擋住下方的文字，并且，能適用于不同長(zhǎng)度的文本。
當(dāng)然，上述方案會(huì)有一點(diǎn)瑕疵，我們無(wú)法讓不同長(zhǎng)度的文本整體的動(dòng)畫(huà)時(shí)間一致。當(dāng)文案數(shù)量相差不大時(shí)，整體可以接受，文案相差數(shù)量較大時(shí)，需要分別設(shè)定下 transition-duration 的時(shí)長(zhǎng)。
完整的 DEMO，你可以戳：CodePen -- Text fades away Animation[5]。
最后
好了，本文到此結(jié)束，希望對(duì)你有幫助 :)
參考資料
[1]CodePen Demo -- Text fades away: https://codepen.io/Chokcoco/pen/xxWPZmz。
[2]CodePen Demo -- Text fades away 2: https://codepen.io/Chokcoco/pen/MWVvoyW。
[3]妙用 background 實(shí)現(xiàn)花式文字效果: https://github.com/chokcoco/iCSS/issues/138。
[4]CodePen -- background-clip 文字漸現(xiàn)效果: https://codepen.io/Chokcoco/pen/XWgpyqz。
[5]CodePen -- Text fades away Animation: https://codepen.io/Chokcoco/pen/wvmqqWa。
[6]Github -- iCSS: https://github.com/chokcoco/iCSS。
