怎么做出火焰效果,

　　从下面的文字开始。

　　下载：

　　纯CSS3实现超逼真蜡烛火焰动画效果的源代码

　　今天的技巧是使用纯CSS来生成更真实的火焰。

　　嗯，它看起来像什么？在CodePen上输入关键字CSS Fire，可以找到这个：

　　或者这个：

　　我们希望只有使用CSS才能进一步提高效果。是不是可以这样：

如何实现

　　嗯，我们需要使用滤波器混合-混合-模式的组合来完成。

　　CSS很多华而不实的效果都是滤镜mix-blend-mode，很有意思，但是在商业上根本用不到。当然，多了解他们也无妨。

　　如上图，整个蜡烛的骨架，除了火焰的部分，都很简单，不用说了。主要看火焰是怎么产生的，怎么给动画效果。

Step 1: filter blur filter contrast

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

　　取出两个独立的过滤器。他们的职能是：

　　Filter: blur():为图像设置高斯模糊效果。Filter: contrast():调整图像的对比度。然而，当它们“契合”时，就会发生奇妙的融合现象。

　　让我们看一个简单的例子：

　　仔细看两个圆相交的过程。当边缘相互接触时，会有一种边界融合的效果。通过对比度滤波消除高斯模糊的模糊边缘，利用高斯模糊实现融合效果。

　　使用上面的滤镜模糊滤镜对比，我们想要形成一个类似火焰形状的三角形。(省略流程)

　　在这里，本文详细讲解了类似火焰形状的三角形的具体实现过程：你不知道的CSS滤镜技巧和细节。

　　父元素添加了滤镜：模糊(5px)对比度(20)，如下所示：

Step 2: 火焰粒子动画

　　看起来已经有点像了。接下来，火焰动画。我们先去掉父元素的滤镜：模糊(5px)对比度(20)，然后继续。

　　这里，我们还利用了过滤器的融合效果。在上面的火焰中，我们随机均匀地分布了大量大小不同的圆形棕色div，并通过使用SASS将它们隐藏在火焰三角形内部，大概是这样的：

　　接下来，我们再次使用SASS，给中间的每个小圆圈一个从下到上逐渐消失的动画，均匀的给不同的动画——延时。它看起来会像这样：

　　好了，最重要的一步，我们再次打开母元素的滤镜：模糊(5px)对比度(20)，神奇的火焰效果就出来了：

Step 3: mix-blend-mode 润色

　　当然上面的效果已经很好了。经过各种尝试，调整参数，我终于发现添加了mix-blend-mode: screen混合模式效果更好，最终页眉图片上方效果如下：

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

　　其他影响

　　当然，掌握了这个方法之后，这个产生火焰的技能也可以转移到其他效果上。下图显示了我对另一个小演示的修改，当hover接触到元素时会产生火焰效果：

　　CodePen演示-悬停射击

　　嗯，这些其实是滤镜和混合模式的一些搭配。按照惯例，会有人留言喷一下。这些花里胡哨的东西有什么用，性能又不好。做生意敢摔断腿吗？

　　就我而言，我虚心接受各种批评和不同意见。当然，我认为搞技术一方面是实用的，另一方面是好玩的。希望喷绕开~

　　回到正题，知道了这种粘湿答答的技巧后，还可以折腾出很多其他有趣的效果。当然，你可能需要尝试更多，比如用下面一个标签达到的滴水效果：

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

　　引人注目的细节

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

　　CSS滤镜可以同时为同一个元素定义多个滤镜，例如filter:blur(5px)contrast(150%)brightness(1.5)，但是不同的滤镜效果不同。

　　也就是说，用滤镜：模糊(5px)对比度(150%)亮度(1.5)和滤镜：亮度(1.5)对比度(150%)模糊(5px)处理同一张图片，得到的结果是不一样的。原因是滤镜颜色值处理算法处理图像的顺序。

　　滤镜动画需要大量计算，不断重绘页面，是一个非常消耗性能的动画。用的时候要注意场景。记得开启硬件加速，合理使用分层技术；Blur()混合对比度()滤镜效果，设置不同的颜色会产生不同的效果。颜色叠加的具体算法暂时还没有找到非常具体的规则和规定。使用时，最好尝试不同的颜色，观察以获得最佳效果；细心的读者会发现，以上效果都是以黑色为背景色，如果试图将背景色改为白色，效果会大打折扣。最后

　　本文只简单介绍了整个思考过程，很多CSS代码细节和调试过程没有展示。默认情况下，您已经掌握了主要的CSS属性，您可以在阅读它们后自行了解更多详细信息：

　　Mix-Blend-Mode更多精彩的CSS技术文章总结在我的Github - iCSS里，不断更新。欢迎订购明星订阅合集。

　　这篇关于如何通过CSS编写火焰效果的文章到此为止。更多相关CSS火焰效果内容，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。