扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
今天小编给大家分享一下怎么使用CSS3滤镜制作文字快闪切换动画效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
易县网站建设公司创新互联公司,易县网站设计制作，有大型网站制作公司丰富经验。已为易县1000+提供企业网站建设服务。企业网站搭建\成都外贸网站制作要多少钱，请找那个售后服务好的易县做网站的公司定做！
今天偶然看到这样一类很有意思的文字快闪动画：
这类文字快闪切换效果运用得当的话，能比较好的吸引用户的眼球。
当然，今天并非是想用 CSS 实现上述的的效果。在尝试的过程中，我发现了另外一类能够使用 CSS 非常轻松实现文字快闪动画，运用了blur() 滤镜和 contrast() 滤镜产生的融合效果，类似于这样：
本文的重点，模糊滤镜叠加对比度滤镜产生的融合效果。单独将两个滤镜拿出来，它们的作用分别是：
filter: blur()： 给图像设置高斯模糊效果。
filter: contrast()： 调整图像的对比度。
但是，当他们“合体”的时候，产生了奇妙的融合现象。
先来看一个简单的例子：
仔细看两圆相交的过程，在边与边接触的时候，会产生一种边界融合的效果，通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。
上述效果的实现基于两点：
图形是在被设置了 filter: contrast() 的画布背景上进行动画的
进行动画的图形被设置了 filter: blur()（ 进行动画的图形的父元素需要是被设置了 filter: contrast() 的画布）
当然，背景色不一定是白色，我们稍稍修改上面的Demo，简单的示意图如下：
利用上述的技巧，我们可以实现文字的融合效果，像是这样：
这样，利用这个技巧，我们可以巧妙构思一下动画：
多个文字按顺序依次出现（利用 animation-delay 进行控制处理）
做到上一个文字消失的同时，下一个文字出现
叠加上上述的滤镜即可
核心代码如下：