之前的一篇比较有意思的文章,抄抄冷饭。但是本身内容并不过时~

今天的小技巧是使用纯 CSS 生成火焰,逼真一点的火焰。

嗯,长什么样子?在 CodePen 上输入[ ; g ` D b w关键字g Z : _ ] e D CSS Fire,能找到这样的:

或者这样的:

›‰‡

我们希望,仅仅使用 CSS ,效果能再更进7 [ u一步吗?能不能是这样s i z e c H N X子:


›‰‡

如何实现

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

  • 很多 CSS 华而不实的效果都是 filter + mix-blend-mode,很有意思,但是业务中根本用不上n J | Z o ~/ = # i D + ,当然多了解了解总没坏处。

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

Step 1: filtez * z ` \ +r blur &` L l a [ q |& filterM C u R } contrast

模糊滤镜叠加对比度滤镜产生的融合效C A A y % r果。

单独将两个滤镜拿出来,它们的作用分别是:

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

filt= \ + P { } +er: contrast():调整图像的对比度。

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

先来看一个简单的例子:

›‰‡

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

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

  • 这里类似火焰形状的三角形的具体实现过程,在这篇文章有详细的讲解:你所不知道的 CSS 滤镜技巧与细节[1]

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

Step 2: 火焰粒子动画

看着已经有点样子了,接下C j P $来是火焰动画,我们先去掉父元素的 filteS . ] ` M P 8 ^r: blur(5px) contrast(20) ,然后继续 。

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

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

›‰‡

OK,P a r } [ Y最重要的一步,我们再把父元素的 filter: bluro e / c(5px) contrast(20) 打开,神奇的火焰效果就出来了:

›‰‡

Step 3: mix-blU V k B : ) & ]end-q M $ t O Cmode 润色

当然,上述效果已经很不错了。经过各种尝试,调整参数,最后} n ^ . P @ . L R我发现加上 mix-blq m (end-mode: screen 混合模式+ L g = H M V 0 n,效果更好,得到头图上面的最终效果如下:


›‰‡

完整源码在我的 CodePen 上:CodePen Demo — CSS FiX W : c F E d zre[2]

另外一些效果

当然,掌握了这种方法后,这种生成火焰的技巧也可以迁移到其U . E | y ~ P他效果去。下图是我鼓捣到另外一个小 Demo,当 hover 到元素的时候,产生^ U m _ V { N O火焰效果:

›‰‡

CodePen Demo — Hover Fire[3]

嗯,这些其实都是对滤镜及混! H + 8 q 9 ~ A合模式的一些搭配运用。按l w V V z # m ] w照惯例,肯定有人会留言喷了,整这些花里胡哨的有什么用,性能又不好,业务中a Y t ; % R Y敢上不把你的腿给打骨折。

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

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


›‰‡

CodeP3 p 4 o P E L u Sen Demo — 单标签实现滴水效果[4]

值得注意的细节点

H 1 I A !画虽然美好,{ z – 0但是具体使用的过程中,仍然有一些需要注意的地方:

1.CSS 滤镜+ b Q可以给同个元素A Z 4 f k ; c t同时定义多个,例如 filq & . s \ter: blur(5px) contrast(150%) brightness(1.5) ,但是滤镜的先后顺序不同产生的效果也是o ) # )不一样的;

  • 也就是说,使用 filter: blur(5px) contrast(k C k 5 Q o a M150%) brightness(16 z . C.5) 和 filter: brightness(+ e ] –1.5) contrast(150%) blur(5px) 处理同一张图片,得到的效果是不一样的,原因在于滤镜的色值处理算法对图片处理的先后顺序。

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

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

4.细心的读者会发现上述效果都是基于黑色底色进行的,动手尝试将底色改为白色,效果U & , h O g ~ T会大打折扣。

最后

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

  • filter
  • mix-blend-mode

更多精彩 CSS 技术文章汇总在我的 Github — iCSS[5] ,持续更新,欢迎点个 star 订阅收藏。

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

如果还有什么疑问或者建议,可以多多交流,e ~ W 9 # T h +原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

参考资料

[1]你所不知道的 CSS 滤镜技巧与细节:

https://github.com/chokcoco/iCSS/issues/30

[2]CodePen Demo — CSS Fire:

[3]CodePen Demo — Hover Fire:

[4]CodePen Demo — 单标签实现滴水效果:

https://codepe2 D }n.io/Chokch w qoco/pen/gZVjJw[5]Github — iCSS: https:5 ~ y c – D F J +//github.com/chokcoco/iCSS

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注