乐趣区

关于前端:多行文本下的文字渐隐消失术

jiezi

本文将探讨一下，在多行文本情景下的一些有意思的文字动效。

多行文本，绝对于单行文本，场景会简单一些，然而在理论业务中，多行文本也是十分之多的，然而其成果解决比起单行文本会更艰难。

单行与多行文本的渐隐

首先，咱们来看这样一个例子，咱们要实现这样一个单行文本的渐隐：

应用 mask，能够轻松实现这样的成果，只须要：

<p>Lorem ipsum dolor sit amet consectetur.</p>
p {mask: linear-gradient(90deg, #fff, transparent);
}

然而，如果，场景变成了多行呢？咱们须要将多行文本最初一行，实现渐隐隐没，并且适配不同的多行场景：

这个就会略微简单一点点，然而也是有多种形式能够实现的。

首先咱们来看一下应用 background 的形式。

应用 background 实现

这里会使用到一个技巧，就是 display: inline 内联元素的 background 展示模式与 display: block 块级元素（或者 inline-block、flex、grid）不统一。

简略看个例子：

<p>Lorem .....</p>
<a>Lorem .....</a>

这里须要留神，<p> 元素是 块级元素 ，而 <a> 是 内联元素。

咱们给它们对立增加上一个从绿色到蓝色的突变背景色：

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

看看成果：

什么意思呢？区别很显著，块级元素的背景整体是一个突变整体，而内联元素的每一行都是会有不一样的成果，整体连起来串联成一个整体。

基于这个个性，咱们能够结构这样一种布局：

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

这里须要解释一下：

  1. 为了利用到理论的内联元素的 background 的个性，咱们须要将理论的文本包裹在内联元素 <a> 内
  2. 理论的文本，利用了 opacity: 0 进行暗藏，理论展现的文本应用了 <a> 元素的伪元素，并且将它的层级设置为 -1，目标是让父元素的背景能够盖过它
  3. <a> 元素的突变为从通明到红色，利用它去遮住上面的理论用伪元素展现的文字，实现文字的渐隐

这样，咱们就能失去这样一种成果：

这里，<a> 元素的突变为从通明到红色，利用前面的红色逐步遮住文字。

如果我将突变改为从彩色到红色（为了不便了解，突变的彩色和红色都带上了一些通明），你能很快的明确这是怎么回事：

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

当然，这个计划有很多问题，譬如利用了 z-index: -1，如果父容器设置了背景色，则会生效，同时不容易精确定位最初一行。因而，更好的形式是应用 mask 来解决。

应用 mask 实现

那么，如果应用 mask 的话，问题，就会变得简略一些，咱们只须要在一个 mask 中，实现两块 mask 区域，一块用于精确管制最初一行，一块用于管制残余局部的通明。

也不须要非凡结构 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;
}

成果如下：

外围在于整个 mask 相干的代码，正如下面而言的，mask 将整个区域分成了两块进行管制：

在下局部这块，咱们利用 mask 做了从右向左的渐隐成果。并且利用了 mask-position 定位，以及 calc 的计算，无论文本都多少行，都是实用的！须要阐明的是，这里的 46px 的意思是 单行文本 的行高加上 padding-bottom 的间隔。能够适配任意行数的文本：

残缺的代码，你能够戳这里：CodePen Demo — Text fades away 2

增加动画成果

好，看完动态的，咱们再来实现一种 ** 动静的文字渐隐隐没。

整体的成果是当鼠标 Hover 到文字的时候，整个文本逐行逐步隐没。像是这样：

这里的外围在于，须要去适配不同的行数，不同的宽度，而且文字是一行一行的进行隐没。

这里外围还是会使用上内联元素 background 的个性。在 妙用 background 实现花式文字效果 这篇文章中，咱们介绍了这样一种技巧。

实现整段文字的渐现，从一种色彩到另外一种色彩：

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

这里须要解释一下，尽管设置了 color: transparent，然而文字默认还是有色彩的，默认的文字色彩，是由第一层突变赋予的 background: linear-gradient(90deg, #999, #999), linear-gradient(90deg, #fc0, #fc0)，也就是这一层：linear-gradient(90deg, #999, #999)。

当 hover 触发时，linear-gradient(90deg, #999, #999) 这一层突变逐步隐没，而另外一层 linear-gradient(90deg, #fc0, #fc0)` 逐步呈现，借此实现上述成果。

CodePen — background-clip 文字渐现成果

好，咱们能够借鉴这个技巧，去实现文字的渐隐隐没。一层为理论的文本，而另外一层是进行动画的遮罩，进行动画的这一层，自身的文字设置为 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: #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 的时候，触发上方元素的背景变动，逐步遮挡住下方的文字，并且，能实用于不同长度的文本。

当然，上述计划会有一点瑕疵，咱们无奈让不同长度的文本整体的动画工夫统一。当文案数量相差不大时，整体能够承受，文案相差数量较大时，须要别离设定下 transition-duration 的时长。

残缺的 DEMO，你能够戳：CodePen — Text fades away Animation

最初

好了，本文到此结束，心愿对你有帮忙 :)

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

退出移动版