正文在下方开始。今天的小技巧是用纯CSS生火，更逼真的一点火。嗯，它看起来像什么？在CodePen上输入关键字CSSFire并找到类似这样的内容：是不是可以这样：如何实现呢，我们需要使用filter+mix-blend-mode的组合来完成。很多花哨的CSS效果都是filter+mix-blend-mode，很有意思，但是在商业上根本用不到。当然，了解更多总是好的。如上图所示，整支蜡烛的骨架，除了火焰的部分，非常简单，更别提撇油了。下面主要看一下火焰是怎么产生的，怎么让它动起来。Step1:filterblur&&filtercontrast模糊滤镜叠加了对比滤镜产生的融合效果。分别取出两个滤镜，它们的作用是：filter:blur()：给图像设置高斯模糊效果。filter:contrast()：调整图像的对比度。然而，当它们“合体”时，却发生了奇妙的融合现象。先看一个简单的例子：仔细看两个圆相交的过程。当边缘相互接触时，会产生边界融合效应。使用contrastfilter去除高斯模糊的模糊边缘，使用高斯模糊来实现。融合效果。使用上面的滤镜模糊和滤镜对比度，我们必须首先生成一个类似于火焰形状的三角形。（过程从略）这里的火焰状三角形的具体实现过程在这篇文章中有详细讲解：CSS滤镜技巧和你不知道的细节给父元素添加滤镜：blur(5px)contrast(20)，就会变成这样：第2步：火焰粒子动画看起来有点，然后是火焰动画，我们先去掉父元素的滤镜：blur(5px)contrast(20)，然后继续。这里也用到了滤镜的融合效果。在上面的火焰中，我们使用SASS将大量大小不一的圆形棕色div随机均匀分布，隐藏在火焰三角形内部，大概是这样的：接下来，我们使用SASS给中间的每个小圆圈赋值加上一个从下往上逐渐消失的动画，均匀赋予不同的animation-delay，会是这样：OK，最重要的一步，放上父元素的滤镜：blur(5px)contrast(20)打开它，神奇的火焰效果就出来了：第三步：mix-blend-modetouch-up当然，上面的效果已经很不错了。经过各种尝试和调整参数，最终发现加入mix-blend-mode：屏幕混合模式，效果更好，最终在头图上的效果如下：完整源码在我的CodePen：CodePenDemo--CSSFire其他效果当然，掌握了这个方法后，这种产生火焰的技巧也可以移植到其他效果上。下图是我摆弄的另一个小demo。当悬停在一个元素上时，它会产生火焰效果：CodePenDemo--HoverFire嗯，这些实际上是滤镜和混合模式的一些组合。按照惯例，肯定会有人留言喷。花那么多花里胡哨的东西有什么用，性能也不好。敢于在生意场上断腿。就我而言，我虚心接受各种批评、质疑和不同意见。当然，我认为技术一方面是实用的，另一方面是出于兴趣自娱自乐。希望巨魔们绕道而行~回归正题，了解了这种粘湿答题技巧后，你还可以创造出很多其他有趣的效果。当然，你可能需要多尝试，比如下面使用一个标签实现的滴水效果：CodePenDemo--单个标签实现滴水效果。值得注意的细节和动画很漂亮，但是在具体使用过程中，还是有一些需要注意的地方：CSSfilters可以同时为同一个元素定义多个CSSfilters，比如filter:blur(5px)contrast(150%)brightness(1.5)，但是过滤器的顺序产生不同的效果；即使用filter:blur(5px)contrast(150%)brightness(1.5)和filter:brightness(1.5)contrast(150%)blur(5px)处理同一张图片时，得到的效果是不一样的。原因是滤镜的颜色值处理算法处理图片的顺序。滤镜动画需要大量计算，不断重绘页面。这是一个非常耗性能的动画。使用时要注意使用场景。记得开启硬件加速，合理使用分层技术；blur()混合contrast()滤镜效果，设置不同的颜色会产生不同的效果，这个颜色叠加的具体算法还没有找到很具体的规律，使用的时候比较一个好的方法就是尝试不同的颜色，观察到获得最佳效果；细心的读者会发现，以上效果都是以黑色背景色为基础，如果尝试将背景色改为白色，效果会大打折扣。最后，本文只是简单介绍了整个思路，很多CSS代码细节在调试过程中并没有展现出来。默认情况下，您已经掌握了主要的CSS属性。看完之后可以自行了解更多细节：filtermix-blend-mode更多精彩CSS技术文章汇总在我的Github——iCSS，持续更新中。订阅收藏夹。好了，本文到此结束，希望对大家有所帮助：）有什么问题或者建议可以多交流，原创文章，文笔有限，知识匮乏，如有不妥之处，敬请谅解！文章，请告诉我。最后，新开的公众号求关注。希望格式更短、质量更高的技术文章，包括但不限于CSS：
