明天偶尔看到这样一类很有意思的文字快闪动画：

这类文字快闪切换成果使用切当的话，能比拟好的吸引用户的眼球。

当然，明天并非是想用 CSS 实现上述的的成果。在尝试的过程中，我发现了另外一类可能应用 CSS 十分轻松实现文字快闪动画，使用了blur() 滤镜和 contrast() 滤镜产生的交融成果，相似于这样：

这个技巧也在多篇文章就提及，本文再简述下。

blur 滤镜混合 contrast 滤镜产生交融成果

本文的重点，含糊滤镜叠加对比度滤镜产生的交融成果。独自将两个滤镜拿进去，它们的作用别离是：

  1. filter: blur()： 给图像设置高斯含糊成果。
  2. filter: contrast()： 调整图像的对比度。

然而，当他们“合体”的时候，产生了微妙的交融景象。

先来看一个简略的例子：

CodePen Demo -- filter mix between blur and contrast

认真看两圆相交的过程，在边与边接触的时候，会产生一种边界交融的成果，通过对比度滤镜把高斯含糊的含糊边缘给干掉，利用高斯含糊实现交融成果。

上述成果的实现基于两点：

  1. 图形是在被设置了 filter: contrast() 的画布背景上进行动画的
  2. 进行动画的图形被设置了 filter: blur()（ 进行动画的图形的父元素须要是被设置了 filter: contrast() 的画布）

当然，背景色不肯定是红色，咱们稍稍批改下面的Demo，简略的示意图如下：

应用 blur/contrast 滤镜实现文字的切换

利用上述的技巧，咱们能够实现文字的交融成果，像是这样：

CodePen Demo -- word animation | word filter

这样，利用这个技巧，咱们能够奇妙构思一下动画：

  1. 多个文字按程序顺次呈现（利用 animation-delay 进行管制解决）
  2. 做到上一个文字隐没的同时，下一个文字呈现
  3. 叠加上上述的滤镜即可

外围代码如下：

<div class="g-container">  <div class="word">iPhone</div>  <div class="word">13</div>  <div class="word">Pro</div>  <div class="word">强得很！</div></div>
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');$speed: 8s;$wordCount: 4;.g-container {    position: relative;    width: 100vw;    height: 100vh;    background: #000;    font-family: 'Montserrat', sans-serif;    color: #fff;    font-size: 120px;    filter: contrast(15);}.word {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    animation: change $speed infinite ease-in-out;    @for $i from 0 to $wordCount {        &:nth-child(#{$i + 1}) {            animation-delay: ($speed / ($wordCount + 1) * $i) - $speed;        }    }}@keyframes change {    0%,    5%,    100% {        filter: blur(0px);        opacity: 1;    }    50%,    80% {        filter: blur(80px);        opacity: 0;    }}

整段代码，外围须要关注 @keyframes change 这个动画，咱们通过程序给文字增加上这个动画（也就是利用 animation-delay 程序增加了延时）实现了上一个文字隐没的过程下一个文字显示的成果。

上述的 .g-container 增加了这样一句代码 -- filter: contrast(15)，去掉这句的话，成果是这样的：

加上这句要害的代码 -- filter: contrast(15)，整个成果就如一开始的题图所示：

CodePen Demo -- 纯 CSS 实现文字交融快闪切换成果

整个动画的两个外围关键点：

  1. 利用了 blur 滤镜混合 contrast 滤镜产生交融成果
  2. 在上一个文字隐没的过程中，显示下一个文字，以此产生以后展现文字是由上个文字演变而来的成果

由此，你能够通过 HTML 管制文字的条数、扭转 SASS 变量中示意动画时长的 $speed 和文字条数的 $wordCount 以及最终 @keyframes change 外面的参数，一直去调整优化你要的成果。演变出各种文字快闪成果。

最初

好了，本文到此结束，心愿本文对你有所帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 -- iCSS前端趣闻

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。