当前位置: 首页 > 科技观察

巧妙利用滤镜实现高级文字闪动效果

时间:2023-03-16 17:23:39 科技观察

今天偶然看到这么一个有趣的文字闪动效果:这种文字闪动效果如果运用得当,更能吸引用户眼球。当然,今天并不是打算用CSS来实现上面的效果。在实验的过程中,我发现了另一种可以很方便的使用CSS实现文字flash动画,利用blur()滤镜和contrast()滤镜产生的融合效果,类似这样:这个技巧也可以在很多在第一篇文章中都有提到,本文就简单介绍一下。模糊滤镜与对比滤镜混合产生融合效果本文重点介绍模糊滤镜与对比滤镜叠加产生的融合效果。分别取出两个滤镜,它们的作用是:filter:blur():给图像设置高斯模糊效果。filter:contrast():调整图像的对比度。然而,当它们“合体”时,却发生了奇妙的融合现象。先看一个简单的例子:CodePenDemo--filtermixbetweenblurandcontrast[1]仔细看两个圆相交的过程。当边缘相互接触时,会产生边界融合效应。通过contrastfilter去掉高斯模糊的模糊边缘,利用高斯模糊达到融合效果。上面效果的实现基于两点:图形在canvas背景上设置动画filter:contrast()set动画图形设置filter:blur()(需要设置动画图形的父元素filter:contrast()canvas)当然背景色不一定是白色的,我们对上面的Demo稍作修改,简单示意图如下:使用blur/contrastfilter切换文字利用上面的技巧,我们可以实现text融合效果是这样的:这样,利用这个技巧,我们可以巧妙的构思出动画:多个文本依次出现(利用animation-delay进行控制处理),使得前面的文本消失的时候,叠加出现的后面的文本。核心代码如下:iPhone

13
Pro
非常强!
@importurl('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');$speed:8s;$wordCount:4;.g-container{position:relative;宽度:100vw;高度:100vh;背景:#000;字体系列:'Montserrat',sans-serif;颜色:#fff;字体大小:120px;滤镜:对比度(15);}.word{位置:绝对;上:50%;左:50%;变换:平移(-50%,-50%);动画:改变$speedinfiniteease-in-out;@for$ifrom0to$wordCount{&:nth-child(#{$i+1}){动画延迟:($speed/($wordCount+1)*$i)-$speed;}}}@keyframeschange{0%,5%,100%{filter:blur(0px);opacity:1;}50%,80%{filter:blur(80px);opacity:0;}}整个代码,核心需要注意@关键帧变化动画,我们把这个动画按顺序加在文字上(也就是用animation-delay按顺序加一个延迟),实现上一个文字消失,下一个文字显示的效果。上面的.g-container添加了这么一段代码--filter:contrast(15),如果去掉这一句,效果如下:添加这句关键代码--filter:contrast(15),整体效果如图在标题图片开头:CodePenDemo--纯CSS实现文字融合flash过渡效果[2]整个动画的两个核心关键点:使用blurfilter混合contrastfilter产生融合效果过程中上一个文字消失,显示下一个文字,生成当前显示文字效果由上一个文字演变而来。因此,可以通过HTML控制文本数量,改变SASS变量中动画时长的$speed和文本数量的$wordCount,最后@keyframes中的参数也随之改变。调整和优化你想要的效果。演变出各种文字闪光效果。最后,本文到此结束,希望本文对你有所帮助:)参考[1]CodePenDemo--filtermixbetweenblurandcontrast:https://codepen.io/Chokcoco/pen/QqWBqV[2]CodePenDemo——纯CSS实现文字融合闪动切换效果:https://codepen.io/Chokcoco/pen/xxLjdmz