本文将探讨一下，在多行文本情形下的一些有意思的文字动效。多行文本，相对于单行文本，场景会复杂一些，但是在实际业务中，多行文本也是非常之多的，但是其效果处理比起单行文本会更困难。
【学习视频分享：css视频教程、web前端】
单行与多行文本的渐隐
首先，我们来看这样一个例子，我们要实现这样一个单行文本的渐隐：
立即学习“前端免费学习笔记（深入）”；
使用 mask，可以轻松实现这样的效果，只需要：
Lorem ipsum dolor sit amet consectetur.
p { mask: linear-gradient(90deg, #fff, transparent);}
但是，如果，场景变成了多行呢？我们需要将多行文本最后一行，实现渐隐消失，并且适配不同的多行场景：
这个就会稍微复杂一点点，但是也是有多种方式可以实现的。
首先我们来看一下使用 background 的方式。
使用 background 实现
这里会运用到一个技巧，就是 display: inline 内联元素的 background 展现形式与 display: block 块级元素（或者 inline-block、flex、grid）不一致。
简单看个例子：
Lorem .....
Lorem .....
这里需要注意，
元素是块级元素，而 ，如果父容器设置了背景色，则会失效，同时不容易准确定位最后一行。因此，更好的方式是使用 background 来解决。
使用
那么，如果使用 opacity: 0 的话，问题，就会变得简单一些，我们只需要在一个 中，实现两块 -1 区域，一块用于准确控制最后一行，一块用于控制剩余部分的透明。
也不需要特殊构造 HTML：
p, a { background: linear-gradient(90deg, blue, green);}
Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam
效果如下：
核心在于整个 相关的代码，正如上面而言的，mask 将整个区域分成了两块进行控制：
在下部分这块，我们利用 做了从右向左的渐隐效果。并且利用了 z-index: -1 定位，以及 calc 的计算，无论文本都多少行，都是适用的！需要说明的是，这里的 mask 的意思是单行文本的行高加上 mask 的距离。可以适配任意行数的文本：
完整的代码，你可以戳这里：CodePen Demo — Text fades away 2
添加动画效果
好，看完静态的，我们再来实现一种**动态的文字渐隐消失。
整体的效果是当鼠标 Hover 到文字的时候，整个文本逐行逐渐消失。像是这样：
这里的核心在于，需要去适配不同的行数，不同的宽度，而且文字是一行一行的进行消失。
这里核心还是会运用上内联元素 mask 的特性。在 妙用 background 实现花式文字效果 这篇文章中，我们介绍了这样一种技巧。
实现整段文字的渐现，从一种颜色到另外一种颜色：
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; }}
a { background: linear-gradient(90deg, rgba(0,0,0, .8), rgba(0,0,0, .9) 70%, rgba(255, 255, 255, .9));}
这里需要解释一下，虽然设置了 mask，但是文字默认还是有颜色的，默认的文字颜色，是由第一层渐变赋予的 mask，也就是这一层：mask。
当 hover 触发时，mask 这一层渐变逐渐消失，而另外一层 linear-gradient(90deg, #fc0, #fc0)` 逐渐出现，借此实现上述效果。
CodePen — background-clip 文字渐现效果
好，我们可以借鉴这个技巧，去实现文字的渐隐消失。一层为实际的文本，而另外一层是进行动画的遮罩，进行动画的这一层，本身的文字设置为 mask-position，这样，我们就只能看到背景颜色的变化。
大致的代码如下：
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;}
其中，46px 为实际在底部，展示的文字层，而 padding-bottom 为叠在上方的背景层，hover 的时候，触发上方元素的背景变化，逐渐遮挡住下方的文字，并且，能适用于不同长度的文本。
当然，上述方案会有一点瑕疵，我们无法让不同长度的文本整体的动画时间一致。当文案数量相差不大时，整体可以接受，文案相差数量较大时，需要分别设定下 background 的时长。
完整的 DEMO，你可以戳：CodePen — Text fades away Animation
原文地址：https://www.cnblogs.com/coco1s/p/16590809.html作者：ChokCoco
更多编程相关知识，请访问：编程视频！！
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%;}
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%;}
以上就是详解怎么使用纯CSS实现多行文本的渐隐动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1624691.html
微信扫一扫 
支付宝扫一扫 
