css3达成蜡烛火焰效果实例
发布时间:2022-04-20 08:49:42 所属栏目:语言 来源:互联网
导读:CSS3能够创建动画,可以实现的动画效果是丰富的,因此可以取代很多网页动画图像,flash动画和JavaScript实现的效果。这篇文章就给大家用CSS3来显示一个蜡烛燃烧火焰的动画效果,感兴趣的朋友就继续往下看吧。 今天的小技巧是使用纯 CSS 生成火焰,逼真一点的
CSS3能够创建动画,可以实现的动画效果是丰富的,因此可以取代很多网页动画图像,flash动画和JavaScript实现的效果。这篇文章就给大家用CSS3来显示一个蜡烛燃烧火焰的动画效果,感兴趣的朋友就继续往下看吧。 今天的小技巧是使用纯 CSS 生成火焰,逼真一点的火焰。嗯,长什么样子?在 CodePen 上输入关键字CSS Fire,能找到这样的: 如何实现 嗯,我们需要使用filter+mix-blend-mode的组合来完成。很多 CSS 华而不实的效果都是filter+mix-blend-mode,很有意思,但是业务中根本用不上,当然多了解了解总没坏处。如上图,整个蜡烛的骨架, 除去火焰的部分很简单,掠过不讲。主要来看看火焰这一块如何生成,并且如何赋予动画效果。 Step 1: filter blur && filter contrast 模糊滤镜叠加对比度滤镜产生的融合效果。单独将两个滤镜拿出来,它们的作用分别是: filter: blur(): 给图像设置高斯模糊效果。 filter: contrast(): 调整图像的对比度。 但是,当他们“合体”的时候,产生了奇妙的融合现象。 仔细看两圆相交的过程,在边与边接触的时候,会产生一种边界融合的效果,通过对比度滤镜把高斯模糊的模糊边缘给干掉,利用高斯模糊实现融合效果。 利用上述filter blur & filter contrast,我们要先生成一个类似火焰形状的三角形。(略去过程)这里类似火焰形状的三角形的具体实现过程,在这篇文章有详细的讲解:你所不知道的 CSS 滤镜技巧与细节 (编辑:开发网_开封站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |