用 CSS 实现火焰特效?不在话下
点上方蓝字关注公众号「前端从进阶到入院」 精选原创好文助你进入大厂 今天的小技巧是使用纯 CSS 生成火焰,逼真一点的火焰。 嗯,长什么样子?在 CodePen 上输入关键字CSS Fire,能找到这样的: 或者这样的: 我们希望,仅仅使用 CSS ,效果能再更进一步吗?能不能是这样子: 如何实现 嗯,我们需要使用filter+mix-blend-mode的组合来完成。 很多 CSS 华而不实的效果都是filter+mix-blend-mode,很有意思,但是业务中根本用不上,当然多了解了解总没坏处。 如上图,整个蜡烛的骨架,出去火焰的部分很简单,掠过不讲。主要来看看火焰这一块如何生成,并且如何赋予动画效果。 Step 1: filter blur && filter contrast 模糊滤镜叠加对比度滤镜产生的融合效果。 单独将两个滤镜拿出来,它们的作用分别是: filter: blur():给图像设置高斯模糊效果。 filter: contrast():调整图像的对比度。 但是,当他们“合体”的时候,产生了奇妙的融合现象。 先来看一个简单的例子: 仔细看两圆相交的...