怎么使用CSS3滤镜制作文字快闪切换动画效果

今天小编给大家分享一下怎么使用CSS3滤镜制作文字快闪切换动画效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。今天偶然看到这样一类很有意思的文字快闪动画：这类文字快闪切换效果运用得当的话，能比较好的吸引用户的眼球。当然，今天并非是想用 CSS 实现上述的的效果。在尝试的过程中，我发现了另外一类能够使用 CSS 非常轻松实现文字快闪动画，运用了blur() 滤镜和 contrast() 滤镜产生的融合效果，类似于这样：本文的重点，模糊滤镜叠加对比度滤镜产生的融合效果。单独将两个滤镜拿出免费云主机、域名来，它们的作用分别是：filter: blur()： 给图像设置高斯模糊效果。filter: contrast()： 调整图像的对比度。但是，当他们“合体”的时候，产生了奇妙的融合现象。先来看一个简单的例子：仔细看两圆相交的过程，在边与边接触的时候，会产生一种边界融合的效果，通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。上述效果的实现基于两点：图形是在被设置了 filter: contrast() 的画布背景上进行动画的进行动画的图形被设置了 filter: blur()（ 进行动画的图形的父元素需要是被设置了 filter: contrast() 的画布）当然，背景色不一定是白色，我们稍稍修改上面的Demo，简单的示意图如下：利用上述的技巧，我们可以实现文字的融合效果，像是这样：这样，利用这个技巧，我们可以巧妙构思一下动画：多个文字按顺序依次出现（利用 animation-delay 进行控制处理）做到上一个文字消失的同时，下一个文字出现叠加上上述的滤镜即可核心代码如下：整段代码，核心需要关注 @keyframes change 这个动画，我们通过顺序给文字添加上这个动画（也就是利用 animation-delay 顺序添加了延时）实现了上一个文字消失的过程下一个文字显示的效果。上述的 .g-container 添加了这样一句代码 — filter: contrast(15)，去掉这句的话，效果是这样的：加上这句关键的代码 — filter: contrast(15)，整个效果就如一开始的题图所示：整个动画的两个核心关键点：利用了 blur 滤镜混合 contrast 滤镜产生融合效果在上一个文字消失的过程中，显示下一个文字，以此产生当前展示文字是由上个文字演变而来的效果由此，你可以通过 HTML 控制文字的条数、改变 SASS 变量中表示动画时长的 $speed 和文字条数的 $wordCount 以及最终 @keyframes change 里面的参数，不断去调整优化你要的效果。演变出各种文字快闪效果。以上就是“怎么使用CSS3滤镜制作文字快闪切换动画效果”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注云技术行业资讯频道。

相关推荐: 男子和路过小朋友对暗号唱挖呀挖：没想到小朋友齐声对唱

5月15日消息，山西一男子遇上一群过路小朋友，男子领唱挖呀挖呀挖”，秒获小朋友们齐声对唱，没想到新接头暗号这就对上了。 最新一段时间，相信你已经听过了无数遍这首挖呀挖呀挖”的儿歌：在小小的花园里面，挖呀挖呀挖，种小小的种子，开小小的花，在大大的花园里面，挖呀挖…