如何通过 CSS 写出火焰效果

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

Posted in HTML / CSS onMarch 24, 2021

在 CodePen 上输入关键字CSS Fire,能找到这样的:

如何通过 CSS 写出火焰效果

或者这样的:

如何通过 CSS 写出火焰效果

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

如何通过 CSS 写出火焰效果

如何实现

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

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

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

Step 1: filter blur && filter contrast

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

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

  1. filter: blur(): 给图像设置高斯模糊效果。
  2. filter: contrast(): 调整图像的对比度。

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

先来看一个简单的例子:

如何通过 CSS 写出火焰效果

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

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

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

如何通过 CSS 写出火焰效果

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

如何通过 CSS 写出火焰效果

Step 2: 火焰粒子动画

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

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

如何通过 CSS 写出火焰效果

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

如何通过 CSS 写出火焰效果

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

如何通过 CSS 写出火焰效果

Step 3: mix-blend-mode 润色

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

如何通过 CSS 写出火焰效果

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

另外一些效果

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

如何通过 CSS 写出火焰效果

CodePen Demo -- Hover Fire

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

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

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

如何通过 CSS 写出火焰效果

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

值得注意的细节点

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

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 属性默认大家已经掌握了大概,阅读后可以自行去了解补充更多细节:

  • filter
  • mix-blend-mode
HTML / CSS 相关文章推荐
纯CSS3代码实现switch滑动开关按钮效果
Aug 30 HTML / CSS
CSS3教程(1):什么是CSS3
Apr 02 HTML / CSS
使用CSS禁止textarea调整大小功能的方法
Mar 13 HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
iframe与window.onload如何使用详解
May 07 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 #HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 #HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 #HTML / CSS
Canvas在超级玛丽游戏中的应用详解
Feb 06 #HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 #HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 #HTML / CSS
canvas版人体时钟的实现示例
Jan 29 #HTML / CSS
You might like
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
Laravel find in set排序实例
2019/10/09 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
python爬取NUS-WIDE数据库图片
2016/10/05 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
python3.6编写的单元测试示例
2019/08/17 Python
Python pymsql模块的使用
2020/09/07 Python
品恩科技软件测试面试题
2014/10/26 面试题
资料员的岗位职责
2013/11/20 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
经典演讲稿开场白
2014/08/25 职场文书
民主生活会意见
2015/06/05 职场文书
python实现自定义日志的具体方法
2021/05/28 Python
Django实现drf搜索过滤和排序过滤
2021/06/21 Python
Linux系统下安装PHP7.3版本
2021/06/26 PHP