今天偶然看到这么一个有趣的文字闪动效果:这种文字闪动效果如果运用得当,更能吸引用户眼球。当然,今天并不是打算用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进行控制处理),使得前面的文本消失的时候,叠加出现的后面的文本。核心代码如下:
