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

意思是，上面两圆运动的背后，其实是叠加了一张设置了 filter: contrast() 的大白色背景，而两个圆形则被设置了 filter: blur() ，两个条件缺一不可。

当然，背景色不一定是白色，我们稍稍修改上面的Demo，简单的示意图如下：

好，上面介绍完原理，下面看看使用这个效果制作的一些强大 CSS 效果，其中最为惊艳的就是使用融合效果制作生成火焰，这个效果我最早是见于 Yusuke Nakaya 这位作者：

不用怀疑你的眼睛，上述 GIF 效果就是使用纯 CSS 实现的。

核心还是 filter: contrast() 与 filter: blur() 配合使用，不过实现的过程也非常有趣，我们需要使用 CSS 画出一个火焰形状。

火焰形状 CSS 核心代码如下：

.fire { width: 0; height: 0; border-radius: 45%; box-sizing: border-box; border: 100px solid #000; border-bottom: 100pxsolid transparent; background-color: #b5932f; transform: scaleX(.4); filter: blur(20px) contrast(30); }

大概是长这样：

分解一下过程：

放在纯黑的背景下，就得到了上述图片的效果。

这里会有个很大的疑问，增加了 filter: blur(20px) contrast(30); 之后，为什么纯色黑色和黄色的中间，生成了一条红色的边框？

这里我咨询了几个设计师、前端同事，得到的答复大概是两个不同滤镜的色值处理算法在边界处叠加作用得到了另外一种颜色。（不一定准确，求赐教），在 PS 里尝试还原这个效果，但是 PS 没有 contrast() 滤镜，得到的效果偏差挺大的。

OK，继续正文，接下来，我们只需要在火焰 .fire 这个 div 内部，用大量的黑色圆形，由下至上，无规律穿过火焰即可。由于滤镜的融合效果，火焰效果随之产生，这里为了方便理解，我把背景色切换成白色，火焰动画原理一看即懂：

具体完整实现可以看这里：

CodePen Demo -- CSS fire | CSS filter mix

另外，我们可以在动画的过程中，动态改变元素滤镜的 filter: blur() 的值。

利用这个方法，我们还可以设计一些文字融合的效果：

具体实现你可以看这里：

CodePen Demo -- word animation | word filter

动画虽然美好，但是具体使用的过程中，仍然有一些需要注意的地方：

也就是说，使用 filter: contrast(150%) brightness(1.5) 和 filter: brightness(1.5) contrast(150%) 处理同一张图片，得到的效果是不一样的，原因在于滤镜的色值处理算法对图片处理的先后顺序。

系列 CSS 文章汇总在我的 Github ，持续更新，欢迎点个 star 订阅收藏。

好了，本文到此结束，希望对你有帮助 :)

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。