本文将探讨一下，在多行文本情景下的一些有意思的文字动效。
多行文本，绝对于单行文本，场景会简单一些，然而在理论业务中，多行文本也是十分之多的，然而其成果解决比起单行文本会更艰难。
单行与多行文本的渐隐
首先，咱们来看这样一个例子，咱们要实现这样一个单行文本的渐隐：
应用 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; }}这里须要解释一下：
- 为了利用到理论的内联元素的
background的个性，咱们须要将理论的文本包裹在内联元素<a>内 - 理论的文本，利用了
opacity: 0进行暗藏，理论展现的文本应用了<a>元素的伪元素，并且将它的层级设置为-1，目标是让父元素的背景能够盖过它 <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 订阅珍藏。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。