文档章节

CSS 火焰?不在话下

o
 osc_a22drz29
发布于 2019/03/27 10:51
字数 1425
阅读 7
收藏 0

精选30+云产品,助力企业轻松上云!>>>

正文从下面开始。


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

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

image

或者这样的:

css-fire1 gif

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

css-fire2 gif

 

如何实现

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

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

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

Step 1: filter blur && filter contrast

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

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

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

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

先来看一个简单的例子:

filtermix

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

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

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

image

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

image

Step 2: 火焰粒子动画

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

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

image

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

css-fire3 gif

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

css-fire4 gif

Step 3: mix-blend-mode 润色

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

css-fire2 gif

完整源码在我的 CodePen 上:CodePen Demo -- CSS Fire

 

另外一些效果

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

css-fire5 gif

CodePen Demo -- Hover Fire

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

R3%2SUAVCIM7S5`J~F{6R4R

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

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

css-fire6 gif

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

 

值得注意的细节点

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

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

  1. 滤镜动画需要大量的计算,不断的重绘页面,属于非常消耗性能的动画,使用时要注意使用场景。记得开启硬件加速及合理使用分层技术;
  2. blur() 混合 contrast() 滤镜效果,设置不同的颜色会产生不同的效果,这个颜色叠加的具体算法暂时没有找到很具体的规则细则,使用时比较好的方法是多尝试不同颜色,观察取最好的效果;
  3. 细心的读者会发现上述效果都是基于黑色底色进行的,动手尝试将底色改为白色,效果会大打折扣。

 

最后

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

  • filter
  • mix-blend-mode

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

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

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

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
上周热点回顾(3.25-3.31)

热点随笔: · .NET Core 给使用.NET的公司所带来的机遇(张善友) 热点新闻:

osc_arhijur3
2019/04/01
16
0
用 CSS 实现酷炫的动画充电效果

巧用 CSS 实现酷炫的充电动画 循序渐进,看看只使用 CSS ,可以鼓捣出什么样的充电动画效果。 画个电池 当然,电池充电,首先得用 CSS 画一个电池,这个不难,随便整一个: 欧了,勉强就是它...

osc_arj2xsvk
2019/12/24
2
0
巧用 CSS 实现酷炫的充电动画

循序渐进,看看只使用 CSS ,可以鼓捣出什么样的充电动画效果。 画个电池 当然,电池充电,首先得用 CSS 画一个电池,这个不难,随便整一个: 欧了,勉强就是它了。有了电池,那接下来直接充...

osc_qr98xq3d
04/16
3
0
巧用 CSS 实现酷炫的充电动画

循序渐进,看看只使用 CSS ,可以鼓捣出什么样的充电动画效果。 画个电池 当然,电池充电,首先得用 CSS 画一个电池,这个不难,随便整一个: 欧了,勉强就是它了。有了电池,那接下来直接充...

刘小夕
03/23
0
0
巧用 CSS 实现酷炫的充电动画

循序渐进,看看只使用 CSS ,可以鼓捣出什么样的充电动画效果。 画个电池 当然,电池充电,首先得用 CSS 画一个电池,这个不难,随便整一个: 欧了,勉强就是它了。有了电池,那接下来直接充...

osc_9vxdigiw
2019/12/25
2
0

没有更多内容

加载失败,请刷新页面

加载更多

eclipse汉化教程(附安装包)

eclipse汉化包安装步骤 一、去官网或者在本站下载Eclipse(不管是什么版,中文设置的方法都是差不多的,所以说我们汉化的教程不管未来更新多少个版本都是一样的) 官方下载地址:www.eclipse.o...

树懒宝宝
32分钟前
22
0
CocosCreator之分层管理的ListView

前言 进入公众号回复listview即可获得demo的git地址。 之前写的一篇文章《Creator之ScrollView那些事》中提到了官方Demo中提供的ListViewCtl,只是实现了纵向滑动,没有实现横向滑动。并且建议...

陈广文
35分钟前
24
0
在CSS Flexbox中,为什么没有“ justify-items”和“ justify-self”属性?

问题: Consider the main axis and cross axis of a flex container: 考虑伸缩容器的主轴和横轴: Source: W3C 资料来源: W3C To align flex items along the main axis there is one pro......

法国红酒甜
37分钟前
17
0
搜索解决方案 - ElasticSearch/Solr/Lucene

搜索解决方案 - ElasticSearch/Solr/Lucene 1. 什么是 ElasticSearch ElasticSearch 是一个基于 Lucene 的搜素服务器 是一个分布式、高扩展、实时的搜素与数据分析引擎 基于 RESTful web 接口...

夙梦o
41分钟前
26
0
设计模式学习笔记(五):工厂方法模式

1 前言 尽管简单工厂模式实现了对象的创建和使用分离,但是仍然存在以下两个问题: 工厂类过于庞大,包含了大量的判断代码,导致维护和测试难度增大 系统扩展不灵活,如果增加了新的产品类型...

氷泠
44分钟前
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部