点上方蓝字关注公众号「前端从进阶到入院」

精选原创好文助你进入大厂

今天的小技巧是使用纯 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，我们要先生成一个类似火焰形状的三角形。（略去过程）

父元素添加 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 混合模式，效果更好，得到头图上面的最终效果如下：

最后

本文只是简单的介绍了整个思路过程，考虑到手机阅读习惯，许多 CSS 代码细节，调试过程没有展现出来。主要几个 CSS 属性默认大家已经掌握了大概，阅读后可以自行去了解补充更多细节：

• filter

• mix-blend-mode

完整源码在我的 CodePen 上：https://codepen.io/Chokcoco/pen/jJJbmz

更多 CSS 文章或者 CSS 奇技淫巧，可以 Github 搜索 iCSS 或者 CSS-Inspiration 仓库了解更多。

原创文章，第一次发布公众号文章，排版欠佳，后面会慢慢学习优化，各位看官多多包涵。

任何关于本文的细节可以留言讨论，欢迎关注支持，将会一直更新下去。

1.喜欢的话别忘了分享、点赞、在看三连哦~。

2.长按下方图片，关注「前端从进阶到入院」，获取我分类整理的原创精选面试热点文章，Vue、React、TS、手写题等应有尽有，我进入字节、滴滴、百度的小伙伴们说文章对他们帮助很大，希望也能帮助到你。