多行文本中的文本淡入淡出

时间：2023-03-29 11:17:27 HTML

本文将探索多行文本中一些有趣的文本动画。多行文字，相对于单行文字，场景会更加复杂，但是在实际业务中，多行文字也非常多，但是其效果处理会比单行文字更难。单行和多行文字的淡入淡出首先来看这样一个例子，我们要实现这样的单行文字的淡入淡出：使用mask，这个效果很容易实现，只需要：

Loremipsumdolorsitametconsectetur.

p{mask:linear-gradient(90deg,#fff,transparent);}但是如果场景变成多线怎么办？我们需要让多行文本的最后一行淡出，适应不同的多行场景：这个会稍微复杂一点，但是有很多方法可以实现。首先，让我们看看如何使用背景。使用背景实现会用到一个技巧，即display:inline内联元素的背景显示形式与display:block块级元素（或inline-block、flex、grid）的背景显示形式不一致。只看一个例子：

Lorem.....

Lorem.....这里需要注意的是，

元素是一个块级元素，而是内部链接元素。我们统一给它们加上一个从绿到蓝的渐变背景色：p,a{background:linear-gradient(90deg,blue,green);}看看效果：什么意思？区别很明显。块级元素的背景整体是渐变色，而内联元素的每一行都会有不同的效果，整体串联起来形成一个整体。基于这个特点，我们可以构建这样一个布局：

Mollitianostrumplaceatconsequaturdesertvelitducimuspossimuscommoditemporibusdebitisquam

pwidth:400px;}a{background:linear-gradient(90deg,transparent,transparent70%,#fff);背景重复：不重复；游标：指针；颜色：透明；&::before{content:"Mollitianostrumplaceatconsequaturdesertvelitducimuspossimuscommoditemporibusdebtisquam";位置：绝对；顶部：0；左：0；颜色：#000；z-指数：-1；，我们需要将实际文本包装在内联元素中。实际文本被opacity:0隐藏，实际显示的文本使用元素的伪元素，其level设置为-1，目的是让父元素的背景覆盖。元素的渐变由透明变为白色，用它遮住下面伪元素显示的实际文字，从而实现文字的淡入淡出。这样，我们就可以得到这样一个效果：这里，元素的渐变是从透明到白色，利用后面的白色逐渐盖住文字。如果我把渐变从黑色改成白色（为了便于理解，渐变的黑白有一定的透明度），你可以很快明白是怎么回事：a{background:linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,.9)70%,rgba(255,255,255,.9));}完整代码可以点击这里：CodePenDemo--文字淡出当然这个方案有很多问题，比如使用z-index:-1，如果父容器设置了背景色会失败，也不容易准确定位到最后一行。因此，更好的方法是使用mask来解决。使用mask实现，如果使用mask，问题会变得简单。我们只需要在一个遮罩中实现两个遮罩区域，一个用于精确控制最后一行，另一个用于控制剩余部分的透明度。也不需要特殊的HTML结构：

Loremipsumdolorsitamet....

p{width:300px;填充：10px；行高：36px；遮罩：线性渐变（270deg，透明，透明30%，#000），线性渐变（270deg，#000，#000）；遮罩尺寸：100%46px，100%计算（100%-46px）；遮罩位置：底部、顶部；mask-repeat:no-repeat;}效果如下：核心在于整个mask相关的代码。上面说了遮罩将整个区域分成两部分进行控制：在下方，我们使用遮罩来实现从右向左淡化的效果。并且使用mask-position定位，和calc的计算，不管文字多少行都适用！需要注意的是，这里的46px是指单行文字的行高加上padding-bottom的距离。可适配任意行数的文字：完整代码可以点击这里：CodePenDemo--Textfadeaway2.添加动画效果不错。看完静态的我们来实现一个**动态的文字淡出。整体效果是当鼠标悬停在文字上时，整个文字逐行逐渐消失。像这样：这里的核心是需要适应不同的行数和不同的宽度，文字逐行消失。这里的核心还是会用到行内元素背景的特性。在Fancytexteffectwithbackground一文中，我们介绍了这样一种技术。实现整个文本的渐变，从一种颜色到另一种颜色：Button

Loremipsumdolorletametconsecteturadipisicingelit。愿我们的坚韧取悦沙漠，让我们在我们欠下的顺境中带路，但被击退是费力的，但控告者是真实的确实是明智的。

a{背景：线性梯度（90deg，#999，#999），线性梯度（90deg，#fc0，#fc0）；背景大小：100%100%，0100px；背景重复：不重复；背景位置：100%100%，0100%；颜色：透明；background-clip:text;}.button:hover~pa{transition:.8salllinear;background-size:0100px,100%100%;}这里需要说明一下，虽然设置了color:transparent，但是文字默认还是有颜色的。文字颜色由第一层渐变背景给定：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，这样我们只能看到背景颜色的变化。通用代码如下：

Mollitianostrumplaceatconsequaturdeserunt.Mollitianostrumplaceatconsequaturdeserunt.

p{width:500px;}.word{position:absolute;顶部：0；左：0；颜色：#000；}.pesudo{位置：相对；背景：线性渐变（90deg，透明，#fff20%，#fff）；背景大小：0100%；背景重复：不重复；背景位置：100%100%；过渡：所有3s线性；color:transparent;}p:hover.pesudo,p:active.pesudo{background-size:500%100%;}其中.word为最下方实际显示的文字层，pesudo为背景层叠在上面。悬停时，触发上层元素的背景变化，逐渐遮挡下层元素。Text,and,可以应用于不同长度的文本。当然，上面的方案会有一点瑕疵，我们无法让不同长度的文本的整体动画时间保持一致。在文案数量差异不大的情况下，整体可以接受。当文案差异较大时，需要单独设置transition-duration的时长。完整的DEMO可以点击：CodePen——文字淡出动画最后，本文到此结束，希望对你有所帮助：）更多精彩的CSS技术文章汇总在我的Github——iCSS，持续更新，欢迎点个星订阅收藏。有什么问题或者建议可以多交流。原创文章文笔有限，知识匮乏。如果文章中有任何不准确的地方，请告诉我。