CSS3动画属性并不是很多,重点是你怎样把它运用起来并且运用好,从简单的hover状态或复杂的小动画,都可以巧妙的用CSS3动画属性来实现。
本文想和大家分享一个比较有创意、实用的CSS天气图标动画,静态的天气图标看上去是很呆板,若加上动画,看起来会更加真实生动,以下例子就是很好的参考案例。
下面我们来做一个会下雨的天气图标实例,过程其实很简单哦。
STEP1: 整体HTML架构
1 | <div class = "icon rainy" > |
2 | <div class = "cloud" ></div> |
3 | <div class = "rain" ></div> |
STEP2: 用CSS绘制云朵图标
CSS代码如下
06 | font-family: 'Roboto' , sans-serif; |
08 | background-color: currentColor; |
13 | display: inline-block; |
27 | background: currentColor; |
30 | -2.1875em 0.6875em 0 -0.6875em, |
31 | 2.0625em 0.9375em 0 -0.9375em, |
33 | -2.1875em 0.6875em 0 -0.3125em #fff, |
34 | 2.0625em 0.9375em 0 -0.5625em #fff; |
44 | background: currentColor; |
45 | box-shadow: 0 0.4375em 0 -0.0625em #fff; |
51 | -2.1875em 0.6875em 0 -0.6875em #fff, |
52 | 2.0625em 0.9375em 0 -0.9375em #fff, |
54 | -2.1875em 0.6875em 0 -0.3125em #fff, |
55 | 2.0625em 0.9375em 0 -0.5625em #fff; |
57 | transform: scale(0.5) translate(6em, -3em); |
58 | animation: cloud 4s linear infinite; |
60 | .cloud:nth-child(2):after { background: #fff; } |
69 | margin: 0.375em 0 0 -2em; |
70 | background: currentColor; |
81 | margin: -1em 0 0 -0.25em; |
83 | border-radius: 100% 0 60% 50% / 60% 0 100% 50%; |
85 | 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), |
86 | -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), |
87 | -1.375em -0.125em 0 rgba(255,255,255,0.2); |
88 | transform: rotate(-28deg); |
89 | animation: rain 3s linear infinite; |
STEP3: 下雨动画
06 | 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), |
07 | -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), |
08 | -1.375em -0.125em 0 #0cf; |
12 | 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), |
13 | -0.875em 1.125em 0 -0.125em #0cf, |
14 | -1.375em -0.125em 0 rgba(255,255,255,0.2); |
17 | background: rgba(255,255,255,0.3); |
19 | 0.625em 0.875em 0 -0.125em #0cf, |
20 | -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), |
21 | -1.375em -0.125em 0 rgba(255,255,255,0.2); |
25 | 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), |
26 | -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), |
27 | -1.375em -0.125em 0 #0cf; |
最后效果:
如果想看其它天气动画图标的代码,请查看以下网址。
在线演示地址&源码:http://codepen.io/joshbader/pen/EjXgqr