【CodePen分析】Day 1:流星+圣诞树

为了不让自己颓废,所以决定做一个简单的坚持挑战,每天分析一个或者多个Codepen上的作品,向其中汲取好的灵感和技巧。今天是第一天,我找到的是来自一位日本小伙Yusuke Nakaya的作品——流星和一个关于圣诞节的作品。

流星

效果预览

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

代码分析

我们从HTML中可以得知它只用了一个标签来代表一颗流星。

流星构成
我们首先要仔细观察一颗流行的构造,可以把它分解为三个部分——尾巴、竖线、横线。正好我们可以利用两个伪元素加上本身的元素来实现这个效果。
而闪光的效果,正好就是靠改变它的宽度来实现的。

drop-shadow
drop-shadow能提供有形状的阴影。
box-shadow是盒投影,中间部分与盒子重叠的地方是不存在阴影,而drop-shadow不一样。

filter: drop-shadow(0 0 6px rgba(105, 155, 255, 1));

圣诞树

这颗圣诞树是由SVG构成的,说实话从技术上来说没有什么要特别说明的,因为很大程度上是靠AI绘制出来然后转换拿到的代码吧,不过可以温习一下SVG的相关知识。另外也用到了TweenMax这个动画库。

效果预览

See the Pen SVG animation - Christmas Tree by rimochiko (@mochilee) on CodePen.

代码分析

回顾viexBox的意思
可以理解为SVG图像是另一个世界,被画在一块视野中观察着。我们给SVG的图案制定的大小以及方位,都被换算成和viewBox一样的单位,而我们自己在外面给它设置的大小再除以viewBox的大小就可以得到svg里面1个单位是多少像素了。另外我们可以用preserveAspectRatio来指定我们怎么去观察这个viewBox的内容。

g标签
我们用g标签来制定一个group,也就是图案组成了一个集合。这里树就被分成了几个部分来分别绘制在一起。