多行文本中的文本淡入淡出
时间：2023-03-19 12:38:15
科技观察
本文将探索多行文本中一些有趣的文本动画。多行文字，相对于单行文字，场景会更加复杂，但是在实际业务中，多行文字也非常多，但是其效果处理会比单行文字更难。单行和多行文字的淡入淡出首先来看这样一个例子，我们要实现这样的单行文字的淡入淡出：使用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:"Mollitianostrumplaceatconsequaturdesertvelitducimuspossimuscommoditemporibusdebitisquam";位置：绝对；顶部：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--文本逐渐消失[1]。当然这个方案有很多问题，比如使用z-index:-1，如果父容器设置背景色会失败，也不容易准确定位到最后一行。因此，更好的方法是使用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--Textfadesaway2[2]。添加动画效果不错。看完静态的，我们来实现一种动态的文字淡入淡出。整体效果是当鼠标悬停在文字上时，整个文字逐行逐渐消失。像这样：这里的核心是需要适应不同的行数和不同的宽度，文字逐行消失。这里的核心还是会用到行内元素背景的特性。在利用背景实现花哨的文字效果[3]一文中，我们介绍了这样一种技术。实现整个文本的渐变，从一种颜色到另一种颜色：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——背景剪辑文本淡入效果[4]。那么，我们可以借鉴这个技术来实现文字的淡入淡出和消失。一层是实际的文本，另一层是动画蒙版。动画这一层的文字设置为color:transparent，这样我们只能看到背景颜色的变化。通用代码如下：
Mollitianostrumplaceatconsequaturdeserunt.Mollitianostrumplaceatconsequaturdeserunt.
p{width:500px;}.word{position:absolute;顶部：0；左：0；颜色：透明；颜色：#000；}.pesudo{位置：相对；背景：线性渐变（90度，透明，#fff20%，#fff）；背景大小：0100%；背景重复：不重复；背景位置：100%100%；过渡：所有3s线性；color:transparent;}p:hover.pesudo,p:active.pesudo{background-size:500%100%;}其中.word为最下方实际显示的文字层，pesudo为背景层堆在上面。悬停时，触发上层元素背景变化，逐渐覆盖下方文字，可适用于不同长度的文字。当然，上面的方案会有一点瑕疵，我们无法让不同长度的文本的整体动画时间保持一致。在文案数量差异不大的情况下，整体可以接受。当文案数量差异较大时，需要单独设置transition-duration的时长。完整的DEMO可以戳：CodePen--TextfadesawayAnimation[5]。最后，本文到此结束，希望对你有所帮助：）参考资料[1]CodePenDemo--文字淡出：https://codepen.io/Chokcoco/pen/xxWPZmz。[2]CodePen演示--文本淡出2：https://codepen.io/Chokcoco/pen/MWVvoyW。[3]使用背景实现花哨的文字效果：https://github.com/chokcoco/iCSS/issues/138。[4]CodePen——背景剪辑文本淡入效果：https://codepen.io/Chokcoco/pen/XWgpyqz。[5]CodePen——文字淡出动画：https://codepen.io/Chokcoco/pen/wvmqqWa。[6]Github——iCSS：https://github.com/chokcoco/iCSS。
