【CodePen分析】Day 2:燃烧的火焰

今天开始准备做毕设了,之前简单的规划了一下,想着还是先把需求分析和UI做好,于是下午把LOGO设计好了,然后也做了几个页面的设计,结果不知不觉就很晚了,差点昨天做了一天就又要放弃了。不过这个作品的选择并不是很好选,因为很多是用了一句话可以说清楚的小技巧,又的是花了很多耐心才能做出来的,总之是需要一些耐心去慢慢发现吧。

燃烧的火焰

效果预览

See the Pen Only CSS: Fire by Yusuke Nakaya (@YusukeNakaya) on CodePen.

代码分析

这个作品一开始看着确实很难想象是如何构造出来的。
不过确实可以发现,就是我们可以制造很多个“黑块”来制造出火焰飘动的感觉,而飘动的情况我们可以随机改变border-radius来完成这个视觉,这个技巧在之前一个海浪的实现中也用到了,可以说是一曲同工之妙。
比较困难的是这个火焰的颜色块是怎么改变的。
火焰其实就是这个“背景”,去除动画看到就是一个红边黄心的三角形。
但是它这里不是用了border,原本是橘色的背景,加了blur(20px) contrast(30)后完成的。
blur我们知道是虚化,contrast是增加对比度用的,两个叠加在一起后竟然出现了这样的效果,好好奇这个是怎么回事0-0。
所以说白了其实这个移动也是多亏了滤镜的帮忙。

题外话:今天还看到一个很有意思的用marqueen标签来实现了下雪的效果,不得不说CSS程序猿们真的是很有创意233。