CSS 火焰？不在话下

正文从下面开始。

---

今天的小技巧是使用纯 CSS 生成火焰，逼真一点的火焰。

嗯，长什么样子？在 CodePen 上输入关键字 CSS Fire，能找到这样的：

或者这样的：

咱们但愿，仅仅使用 CSS ，效果能再更进一步吗？能不能是这样子：

如何实现

嗯，咱们须要使用 filter + mix-blend-mode 的组合来完成。

不少 CSS 华而不实的效果都是 filter + mix-blend-mode，颇有意思，可是业务中根本用不上，固然多了解了解总没坏处。

如上图，整个蜡烛的骨架， 除去火焰的部分很简单，掠过不讲。主要来看看火焰这一块如何生成，而且如何赋予动画效果。

Step 1: filter blur && filter contrast

模糊滤镜叠加对比度滤镜产生的融合效果。

单独将两个滤镜拿出来，它们的做用分别是：

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

可是，当他们“合体”的时候，产生了奇妙的融合现象。

先来看一个简单的例子：

仔细看两圆相交的过程，在边与边接触的时候，会产生一种边界融合的效果，经过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。

利用上述 filter blur & filter contrast，咱们要先生成一个相似火焰形状的三角形。（略去过程）

这里相似火焰形状的三角形的具体实现过程，在这篇文章有详细的讲解：你所不知道的 CSS 滤镜技巧与细节

父元素添加 filter: blur(5px) contrast(20)，会变成这样：

Step 2: 火焰粒子动画

看着已经有点样子了，接下来是火焰动画，咱们先去掉父元素的 filter: blur(5px) contrast(20) ，而后继续 。

这里也是利用了 filter 的融合效果，咱们在上述火焰中，利用 SASS 随机均匀分布大量大小不一的圆形棕色 div ，隐匿在火焰三角内部，大概是这样：

接下来，咱们再利用 SASS，给中间每一个小圆赋予一个从下往上逐渐消失的动画，而且均匀赋予不一样的 animation-delay，看起来会是这样：

OK，最重要的一步，咱们再把父元素的 filter: blur(5px) contrast(20) 打开，神奇的火焰效果就出来了：

Step 3: mix-blend-mode 润色

固然，上述效果已经很不错了。通过各类尝试，调整参数，最后我发现加上 mix-blend-mode: screen 混合模式，效果更好，获得头图上面的最终效果以下：

完整源码在个人 CodePen 上：CodePen Demo -- CSS Fire

另一些效果

固然，掌握了这种方法后，这种生成火焰的技巧也能够迁移到其余效果去。下图是我鼓捣到另一个小 Demo，当 hover 到元素的时候，产生火焰效果：

CodePen Demo -- Hover Fire

嗯，这些其实都是对滤镜及混合模式的一些搭配运用。按照惯例，确定有人会留言喷了，整这些花里胡哨的有什么用，性能又很差，业务中敢上不把你的腿给打骨折。

于我而言，虚心接受各类批评质疑及各类不一样的观点，固然我是以为搞技术一方面是实用，另外一方面是兴趣使然，自娱自乐。但愿喷子绕道~

回到正题，了解了这种黏糊糊湿答答的技巧后，还能够折腾出其余不少有意思的效果，固然可能须要更多的去尝试，以下面使用一个标签实现的滴水效果：

CodePen Demo -- 单标签实现滴水效果

值得注意的细节点

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

1. CSS 滤镜能够给同个元素同时定义多个，例如 filter: blur(5px) contrast(150%) brightness(1.5) ，可是滤镜的前后顺序不一样产生的效果也是不同的；

也就是说，使用 filter: blur(5px) contrast(150%) brightness(1.5) 和 filter: brightness(1.5) contrast(150%) blur(5px) 处理同一张图片，获得的效果是不同的，缘由在于滤镜的色值处理算法对图片处理的前后顺序。

2. 滤镜动画须要大量的计算，不断的重绘页面，属于很是消耗性能的动画，使用时要注意使用场景。记得开启硬件加速及合理使用分层技术；
3. blur() 混合 contrast() 滤镜效果，设置不一样的颜色会产生不一样的效果，这个颜色叠加的具体算法暂时没有找到很具体的规则细则，使用时比较好的方法是多尝试不一样颜色，观察取最好的效果；
4. 细心的读者会发现上述效果都是基于黑色底色进行的，动手尝试将底色改成白色，效果会大打折扣。

最后

本文只是简单的介绍了整个思路过程，许多 CSS 代码细节，调试过程没有展示出来。主要几个 CSS 属性默认你们已经掌握了大概，阅读后能够自行去了解补充更多细节：

• filter
• mix-blend-mode

更多精彩 CSS 技术文章汇总在个人 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。

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

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

最后，新开通的公众号求关注，形式但愿是更短的篇幅，质量更高一些的技巧类文章，包括但不局限于 CSS：