CSS 火焰?不在话下

作者: 57c7496c74e0 | 来源:发表于2020-03-23 15:32 被阅读0次

嗯,长什么样子?在 CodePen 上输入关键字 CSS Fire,能找到这样的:

image

或者这样的:

image

我们希望,仅仅使用 CSS ,效果能再更进一步吗?能不能是这样子:

image

如何实现

嗯,我们需要使用 filter + mix-blend-mode 的组合来完成。

很多 CSS 华而不实的效果都是 filter + mix-blend-mode,很有意思,但是业务中根本用不上,当然多了解了解总没坏处。

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

Step 1: filter blur && filter contrast

模糊滤镜叠加对比度滤镜产生的融合效果。
单独将两个滤镜拿出来,它们的作用分别是:

  • filter: blur():给图像设置高斯模糊效果。

  • filter: contrast():调整图像的对比度。

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

先来看一个简单的例子:

image

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

利用上述 filter blur & filter contrast,我们要先生成一个类似火焰形状的三角形。(略去过程)

image

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

image
Step 2: 火焰粒子动画

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

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

image

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

image

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

image
Step 3: mix-blend-mode 润色

当然,上述效果已经很不错了。经过各种尝试,调整参数,最后我发现加上 mix-blend-mode: screen 混合模式,效果更好,得到头图上面的最终效果如下:

image

源码:https://codepen.io/Chokcoco/pen/jJJbmz

另外一些效果

在这里说一下,因为我是自学出来的,也深知自学的艰苦,如果你现在也在自学前端,在自学的过程当中有遇见任何关于学习方法,学习路线,学习效率等方面的问题,都可以加入我创建的前端自学交流扣扣裙前面输入是:107中间是:418最后连起来:2891,有遇见任何问题都可以随时来交流,只有不断的碰撞和交流,我们才能发现解决自己的问题,以此取长补短。缺乏基础入门的视频教程也可以直接来找我要,我这边整理了一套最新的前端基础入门全套视频教程,可以直接分享给大家。 https://shimo.im/docs/XTgDptdp3pQJJ6GH/ 《零基础学习前端思路,附带学习资料》

当然,掌握了这种方法后,这种生成火焰的技巧也可以迁移到其他效果去。下图是我鼓捣到另外一个小 Demo,当 hover 到元素的时候,产生火焰效果:

image

源码:https://codepen.io/Chokcoco/pen/aMRPjR

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

于我而言,虚心接受各种批评质疑及各种不同的观点,当然我是觉得搞技术一方面是实用,另一方面是兴趣使然,自娱自乐。希望喷子绕道~

回到正题,了解了这种黏糊糊湿答答的技巧后,还可以折腾出其他很多有意思的效果,当然可能需要更多的去尝试,如下面使用一个标签实现的滴水效果:

image

源码:https://codepen.io/Chokcoco/pen/gZVjJw
值得注意的细节点

动画虽然美好,但是具体使用的过程中,仍然有一些需要注意的地方:

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) 处理同一张图片,得到的效果是不一样的,原因在于滤镜的色值处理算法对图片处理的先后顺序。

滤镜动画需要大量的计算,不断的重绘页面,属于非常消耗性能的动画,使用时要注意使用场景。记得开启硬件加速及合理使用分层技术;

blur() 混合 contrast() 滤镜效果,设置不同的颜色会产生不同的效果,这个颜色叠加的具体算法暂时没有找到很具体的规则细则,使用时比较好的方法是多尝试不同颜色,观察取最好的效果;

细心的读者会发现上述效果都是基于黑色底色进行的,动手尝试将底色改为白色,效果会大打折扣。

最后

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

好了,本文到此结束,希望对你有帮助

相关文章

  • CSS 火焰?不在话下

    嗯,长什么样子?在 CodePen 上输入关键字 CSS Fire,能找到这样的: 或者这样的: 我们希望,仅仅使...

  • 腾讯前端面试题——CSS 火焰?不在话下!

    今天的小技巧是使用纯 CSS 生成火焰,逼真一点的火焰。 嗯,长什么样子?在 CodePen 上输入关键字CSS ...

  • CSS 让火焰变的更加生动

    正文从下面开始。 今天的小技巧是使用纯 CSS 生成火焰,逼真一点的火焰。 嗯,长什么样子?在 CodePen 上...

  • erlang火焰图

    erlang火焰图 目录 火焰图相关什么是火焰图火焰图的意义 erlang火焰图如何绘制erlang火焰图erla...

  • 青葱岁月

    虎窜 牛犊猛追 吞山河,不在话下

  • 一个解剖社会的我!一无是处。

    讲真的。 拯救人性也不在话下。

  • 火焰

    云朵将天空分成两半 雨滴打湿了 顷刻破碎的远方 缓缓移动着 散开在满天的洁白 透过梦境的火焰 燃烧着飞逝的夏夜 金...

  • 火焰

    所有冬天的雪花是一朵火焰你也是一朵火焰你与所有冬天的雪花融化成一朵火焰 我漫长地等待而来的灯盏变成了自己的孪生姐妹...

  • 火焰

    你定看得见这火焰 当你漫步于雨后的晴天 软泥上的舌尖诉说着生命的渴求 每呼吸一次就是一次不可抑制的蓬勃 梧桐清水洗...

  • 火焰

    第一章 火焰 “从前有座山,山上有座庙,庙里有个和尚,给小和尚讲故事,故事讲的是:从前有座山……”山脚底下的孩童不...

网友评论

    本文标题:CSS 火焰?不在话下

    本文链接:https://www.haomeiwen.com/subject/fzywyhtx.html