之前复制一篇比较有意思的文章不是问题。但是内容本身并没有过时~今天的小技巧是用纯CSS生成火焰,更真实一点的火焰。嗯,它看起来像什么?在CodePen上输入关键字CSSFire,你可以找到类似这样的内容:或者类似这样的内容:我们希望只使用CSS,效果能更进一步?是不是可以这样:如何实现呢,我们需要使用filter+mix-blend-mode的组合来实现。很多花哨的CSS效果都是filter+mix-blend-mode,很有意思,但是在商业上根本用不到。当然,了解更多总是好的。如上图所示,整支蜡烛的骨架,除了火焰的部分,非常简单,更别提撇油了。下面主要看一下火焰是怎么产生的,怎么让它动起来。Step1:filterblur&&filtercontrast模糊滤镜叠加了对比滤镜产生的融合效果。分别取出两个滤镜,它们的作用是:filter:blur():给图像设置高斯模糊效果。filter:contrast():调整图像的对比度。然而,当它们“合体”时,却发生了奇妙的融合现象。先看一个简单的例子:仔细看两个圆相交的过程。当边缘相互接触时,会产生边界融合效应。使用contrastfilter去除高斯模糊的模糊边缘,使用高斯模糊来实现。融合效果。使用上面的滤镜模糊和滤镜对比度,我们必须首先生成一个类似于火焰形状的三角形。(过程从略)这里火焰状三角形的具体实现过程在这篇文章中有详细讲解:CSS滤镜技巧和你不知道的细节【1】给父元素添加滤镜:blur(5px)对比(20),就会变成这样:Step2:火焰粒子动画看起来有点,接下来是火焰动画,我们先去掉父元素的滤镜:blur(5px)contrast(20),然后继续.这里也用到了滤镜的融合效果。在上面的火焰中,我们使用SASS将大量大小不一的圆形棕色div随机均匀分布,隐藏在火焰三角形内部,大概是这样的:接下来,我们使用SASS给中间的每个小圆圈赋值加上一个从下往上逐渐消失的动画,均匀赋予不同的animation-delay,会是这样:OK,最重要的一步,放上父元素的滤镜:blur(5px)contrast(20)打开它,神奇的火焰效果就出来了:第三步:mix-blend-modetouch-up当然,上面的效果已经很不错了。经过各种尝试和调整参数,最终发现加入mix-blend-mode:屏幕混合模式,效果更好,最终在头图上的效果如下:完整源码在我的CodePen:CodePenDemo--CSSFire[2]其他效果当然,掌握了这种方法后,这种产生火焰的技巧也可以转移到其他效果上。下图是我摆弄的另一个小demo。当悬停在一个元素上时,它会产生火焰效果:CodePenDemo--HoverFire[3]嗯,这些实际上是滤镜和混合模式的一些组合。按照惯例,肯定会有人留言喷。花那么多花里胡哨的东西有什么用,性能也不好。敢于在生意场上断腿。就我而言,我虚心接受各种批评、质疑和不同意见。当然,我认为技术一方面是实用的,另一方面是出于兴趣自娱自乐。希望巨魔们绕道而行~回归正题,了解了这种粘湿答题技巧后,你还可以创造出很多其他有趣的效果。当然,你可能还需要多尝试,比如下面使用一个标签实现的滴水效果:CodePenDemo--单个标签实现滴水效果[4]值得注意的细节动画虽然很美,但还是有一些需要注意的地方具体使用过程中注意: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属性。看完之后可以自行了解更多细节:filtermix-blend-mode更多精彩CSS技术文章汇总在我的Github——iCSS[5],持续更新中。欢迎点个星订阅收藏。好了,本文到此结束,希望对大家有所帮助:)有什么问题或者建议可以多交流,原创文章,文笔有限,知识匮乏,如有不妥之处,敬请谅解!文章,请告诉我。参考资料[1]你不知道的CSS过滤技巧和细节:https://github.com/chokcoco/iCSS/issues/30[2]CodePenDemo--CSSFire:https://codepen.io/Chokcoco/pen/jJJbmz[3]CodePenDemo--HoverFire:https://codepen.io/Chokcoco/pen/aMRPjR[4]CodePenDemo--单标签实现滴水效果:https://codepen.io/Chokcoco/pen/gZVjJw[5]Github——iCSS:https://github.com/chokcoco/iCSS
