css3动画属性并不是很多，但重点其实是你怎样去运用它，从简单的hover状态或复杂的小动画，都可以巧妙的用css3动画属性来实现。
今天主要是和大家分享一个比较有创意、实用的css天气图标动画，静态的天气图标看上去是很呆板，若加上动画，看起来会更加真实生动，以下例子就是很好的参考案例。
下面我们来做一个会下雨的天气图标实例，过程其实很简单哦。
step1: 整体html架构
step2: 用css绘制云朵图标
css代码如下
body?{
max-width:?42em;
padding:?2em;
margin:?0?auto;
color:?#161616;
font-family:?'roboto',?sans-serif;
text-align:?center;
background-color:?currentcolor;
}
.icon?{
position:?relative;
display:?inline-block;
width:?12em;
height:?10em;
font-size:?1em;?/*?control?icon?size?here?*/
}
.cloud?{
position:?absolute;
z-index:?1;
top:?50%;
left:?50%;
width:?3.6875em;
height:?3.6875em;
margin:?-1.84375em;
background:?currentcolor;
border-radius:?50%;
box-shadow:
-2.1875em?0.6875em?0?-0.6875em,
2.0625em?0.9375em?0?-0.9375em,
0?0?0?0.375em?#fff,
-2.1875em?0.6875em?0?-0.3125em?#fff,
2.0625em?0.9375em?0?-0.5625em?#fff;
}
.cloud:after?{
content:?'';
position:?absolute;
bottom:?0;
left:?-0.5em;
display:?block;
width:?4.5625em;
height:?1em;
background:?currentcolor;
box-shadow:?0?0.4375em?0?-0.0625em?#fff;
}
.cloud:nth-child(2)?{
z-index:?0;
background:?#fff;
box-shadow:
-2.1875em?0.6875em?0?-0.6875em?#fff,
2.0625em?0.9375em?0?-0.9375em?#fff,
0?0?0?0.375em?#fff,
-2.1875em?0.6875em?0?-0.3125em?#fff,
2.0625em?0.9375em?0?-0.5625em?#fff;
opacity:?0.3;
transform:?scale(0.5)?translate(6em,?-3em);
animation:?cloud?4s?linear?infinite;
}
.cloud:nth-child(2):after?{?background:?#fff;?}
.rain{
position:?absolute;
z-index:?2;
top:?50%;
left:?50%;
width:?3.75em;
height:?3.75em;
margin:?0.375em?0?0?-2em;
background:?currentcolor;
}
.rain:after?{
content:?'';
position:?absolute;
z-index:?2;
top:?50%;
left:?50%;
width:?1.125em;
height:?1.125em;
margin:?-1em?0?0?-0.25em;
background:?#0cf;
border-radius:?100%?0?60%?50%?/?60%?0?100%?50%;
box-shadow:
0.625em?0.875em?0?-0.125em?rgba(255,255,255,0.2),
-0.875em?1.125em?0?-0.125em?rgba(255,255,255,0.2),
-1.375em?-0.125em?0?rgba(255,255,255,0.2);
transform:?rotate(-28deg);
animation:?rain?3s?linear?infinite;?/*设置动画?rain?*/
}step3: 下雨动画
/*?下雨动画?animations?*/?
@keyframes?rain?{
0%?{
background:?#0cf;
box-shadow:
0.625em?0.875em?0?-0.125em?rgba(255,255,255,0.2),
-0.875em?1.125em?0?-0.125em?rgba(255,255,255,0.2),
-1.375em?-0.125em?0?#0cf;
}
25%?{
box-shadow:
0.625em?0.875em?0?-0.125em?rgba(255,255,255,0.2),
-0.875em?1.125em?0?-0.125em?#0cf,
-1.375em?-0.125em?0?rgba(255,255,255,0.2);
}
50%?{
background:?rgba(255,255,255,0.3);
box-shadow:
0.625em?0.875em?0?-0.125em?#0cf,
-0.875em?1.125em?0?-0.125em?rgba(255,255,255,0.2),
-1.375em?-0.125em?0?rgba(255,255,255,0.2);
}
100%?{
box-shadow:
0.625em?0.875em?0?-0.125em?rgba(255,255,255,0.2),
-0.875em?1.125em?0?-0.125em?rgba(255,255,255,0.2),
-1.375em?-0.125em?0?#0cf;
}
}最图效果：
如果想看其它天气动画图标的代码，请查看以下网址。
在线演示地址&源码：http://codepen.io/joshbader/pen/ejxgqr