日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

本文將探討一下，在多行文本情形下的一些有意思的文字動效。

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供自貢網(wǎng)站建設、自貢做網(wǎng)站、自貢網(wǎng)站設計、自貢網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、自貢企業(yè)網(wǎng)站模板建站服務，十多年自貢做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。

多行文本，相對于單行文本，場景會復雜一些，但是在實際業(yè)務中，多行文本也是非常之多的，但是其效果處理比起單行文本會更困難。

單行與多行文本的漸隱

首先，我們來看這樣一個例子，我們要實現(xiàn)這樣一個單行文本的漸隱：

使用 mask，可以輕松實現(xiàn)這樣的效果，只需要：

Lorem ipsum dolor sit amet consectetur.

p {
    mask: linear-gradient(90deg, #fff, transparent);
}

但是，如果，場景變成了多行呢？我們需要將多行文本最后一行，實現(xiàn)漸隱消失，并且適配不同的多行場景：

這個就會稍微復雜一點點，但是也是有多種方式可以實現(xiàn)的。

首先我們來看一下使用 background 的方式。

使用 background 實現(xiàn)

這里會運用到一個技巧，就是 display: inline 內(nèi)聯(lián)元素的 background 展現(xiàn)形式與 display: block 塊級元素（或者 inline-block、flex、grid）不一致。

簡單看個例子：

Lorem .....

Lorem .....

這里需要注意，

 元素是塊級元素，而  是內(nèi)聯(lián)元素。

我們給它們統(tǒng)一添加上一個從綠色到藍色的漸變背景色：

p, a {
  background: linear-gradient(90deg, blue, green);
}

看看效果：

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

基于這個特性，我們可以構(gòu)造這樣一種布局：

Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam

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;
    }
}

這里需要解釋一下：

1. 為了利用到實際的內(nèi)聯(lián)元素的background 的特性，我們需要將實際的文本包裹在內(nèi)聯(lián)元素 內(nèi)。
2. 實際的文本，利用了opacity: 0 進行隱藏，實際展示的文本使用了 元素的偽元素，并且將它的層級設置為-1，目的是讓父元素的背景可以蓋過它。
3.  元素的漸變?yōu)閺耐该鞯桨咨?，利用它去遮住下面的實際用偽元素展示的文字，實現(xiàn)文字的漸隱。

這里， 元素的漸變?yō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]。

當然，這個方案有很多問題，譬如利用了 z-index: -1，如果父容器設置了背景色，則會失效，同時不容易準確定位最后一行。因此，更好的方式是使用 mask 來解決。

Lorem ipsum dolor sit amet ....

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;
}

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%;
}

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

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

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

好，我們可以借鑒這個技巧，去實現(xiàn)文字的漸隱消失。一層為實際的文本，而另外一層是進行動畫的遮罩，進行動畫的這一層，本身的文字設置為 color: transparent，這樣，我們就只能看到背景顏色的變化。

大致的代碼如下：

    Mollitia nostrum placeat consequatur deserunt.
    Mollitia nostrum placeat consequatur deserunt.

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 為實際在底部，展示的文字層，而 pesudo 為疊在上方的背景層，hover 的時候，觸發(fā)上方元素的背景變化，逐漸遮擋住下方的文字，并且，能適用于不同長度的文本。

當然，上述方案會有一點瑕疵，我們無法讓不同長度的文本整體的動畫時間一致。當文案數(shù)量相差不大時，整體可以接受，文案相差數(shù)量較大時，需要分別設定下 transition-duration 的時長。

完整的 DEMO，你可以戳：CodePen -- Text fades away Animation[5]。

最后

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

參考資料

[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 實現(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。