这篇文章主要介绍“如何使用纯CSS实现多行文本的渐隐动画”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“如何使用纯CSS实现多行文本的渐隐动画”文章能帮助大家解决问题。首先,我们来看这样一个例子,我们要实现这样一个单行文本免费云主机、域名的渐隐:使用 mask
,可以轻松实现这样的效果,只需要:
Loremipsumdolorsitametconsectetur.
p{ mask:linear-gradient(90deg,#fff,transparent); }
Loremipsumdolorsitametconsectetur.但是,如果,场景变成了多行呢?我们需要将多行文本最后一行,实现渐隐消失,并且适配不同的多行场景:这个就会稍微复杂一点点,但是也是有多种方式可以实现的。首先我们来看一下使用 background
的方式。这里会运用到一个技巧,就是 display: inline
内联元素的 background
展现形式与 display: block
块级元素(或者 inline-block
、flex
、grid
)不一致。简单看个例子:
Lorem.....
Lorem.....
Lorem…..这里需要注意,
元素是块级元素,而 是内联元素。我们给它们统一添加上一个从绿色到蓝色的渐变背景色:
p,a{ background:linear-gradient(90deg,blue,green); }
看看效果:什么意思呢?区别很明显,块级元素的背景整体是一个渐变整体,而内联元素的每一行都是会有不一样的效果,整体连起来串联成一个整体。基于这个特性,我们可以构造这样一种布局:
Mollitianostrumplaceatconsequaturdeseruntvelitducimuspossimuscommoditemporibusdebitisquam
p{ position:relative; width:400px; } a{ background:linear-gradient(90deg,transparent,transparent70%,#fff); background-repeat:no-repeat; cursor:pointer; color:transparent; &::before{ content:"Mollitianostrumplaceatconsequaturdeseruntvelitducimuspossimuscommoditemporibusdebitisquam"; position:absolute; top:0; left:0; color:#000; z-index:-1; } }
Mollitianostrumplaceatconsequaturdeseruntvelitducimuspossimuscommoditemporibusdebitisquam这里需要解释一下:为了利用到实际的内联元素的 background
的特性,我们需要将实际的文本包裹在内联元素 内实际的文本,利用了
opacity: 0
进行隐藏,实际展示的文本使用了 元素的伪元素,并且将它的层级设置为
-1
,目的是让父元素的背景可以盖过它 元素的渐变为从透明到白色,利用它去遮住下面的实际用伪元素展示的文字,实现文字的渐隐这样,我们就能得到这样一种效果:这里,
元素的渐变为从透明到白色,利用后面的白色逐渐遮住文字。如果我将渐变改为从黑色到白色(为了方便理解,渐变的黑色和白色都带上了一些透明),你能很快的明白这是怎么回事:
a{ background:linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,.9)70%,rgba(255,255,255,.9)); }
当然,这个方案有很多问题,譬如利用了 z-index: -1
,如果父容器设置了背景色,则会失效,同时不容易准确定位最后一行。因此,更好的方式是使用 mask
来解决。那么,如果使用 mask
的话,问题,就会变得简单一些,我们只需要在一个 mask
中,实现两块 mask
区域,一块用于准确控制最后一行,一块用于控制剩余部分的透明。也不需要特殊构造 HTML:
Loremipsumdolorsitamet....
p{ width:300px; padding:10px; line-height:36px; mask: linear-gradient(270deg,transparent,transparent30%,#000), linear-gradient(270deg,#000,#000); mask-size:100%46px,100%calc(100%-46px); mask-position:bottom,top; mask-repeat:no-repeat; }
Loremipsumdolorsitamet….效果如下:核心在于整个 mask
相关的代码,正如上面而言的,mask 将整个区域分成了两块进行控制:在下部分这块,我们利用 mask
做了从右向左的渐隐效果。并且利用了 mask-position
定位,以及 calc 的计算,无论文本都多少行,都是适用的!需要说明的是,这里的 46px
的意思是单行文本的行高加上 padding-bottom
的距离。可以适配任意行数的文本:好,看完静态的,我们再来实现一种**动态的文字渐隐消失。整体的效果是当鼠标 Hover 到文字的时候,整个文本逐行逐渐消失。像是这样:这里的核心在于,需要去适配不同的行数,不同的宽度,而且文字是一行一行的进行消失。这里核心还是会运用上内联元素 background
的特性。实现整段文字的渐现,从一种颜色到另外一种颜色:
ButtonLoremipsumdolorsitametconsecteturadipisicingelit.Mollitianostrumplaceatconsequaturdeseruntvelitducimuspossimuscommoditemporibusdebitisquam,molestiaelaboriosamsitrepellendussedsapientequidemquodaccusantiumvero.
a{ background: linear-gradient(90deg,#999,#999), linear-gradient(90deg,#fc0,#fc0); background-size:100%100%,0100px; background-repeat:no-repeat; background-position:100%100%,0100%; color:transparent; background-clip:text; } .button:hover~pa{ transition:.8salllinear; background-size:0100px,100%100%; }
Loremipsumdolorsitametconsecteturadipisicingelit.Mollitianostrumplaceatconsequaturdeseruntvelitducimuspossimuscommoditemporibusdebitisquam,molestiaelaboriosamsitrepellendussedsapientequidemquodaccusantiumvero.这里需要解释一下,虽然设置了 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
,这样,我们就只能看到背景颜色的变化。大致的代码如下:
Mollitianostrumplaceatconsequaturdeserunt. Mollitianostrumplaceatconsequaturdeserunt.
p{ width:500px; } .word{ position:absolute; top:0; left:0; color:transparent; color:#000; } .pesudo{ position:relative; background:linear-gradient(90deg,transparent,#fff20%,#fff); background-size:0100%; background-repeat:no-repeat; background-position:100%100%; transition:all3slinear; color:transparent; } p:hover.pesudo, p:active.pesudo{ background-size:500%100%; }
Mollitianostrumplaceatconsequaturdeserunt.
Mollitianostrumplaceatconsequaturdeserunt.
其中,.word
为实际在底部,展示的文字层,而 pesudo
为叠在上方的背景层,hover 的时候,触发上方元素的背景变化,逐渐遮挡住下方的文字,并且,能适用于不同长度的文本。当然,上述方案会有一点瑕疵,我们无法让不同长度的文本整体的动画时间一致。当文案数量相差不大时,整体可以接受,文案相差数量较大时,需要分别设定下 transition-duration
的时长。关于“如何使用纯CSS实现多行文本的渐隐动画”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注云技术行业资讯频道,小编每天都会为大家更新不同的知识点。
这篇文章主要介绍“vue打包之后显示源代码多少行报错怎么解决”,在日常操作中,相信很多人在vue打包之后显示源代码多少行报错怎么解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue打包之后显示源代码多少行报错怎么解决”的疑惑…