純CSS實(shí)現(xiàn)帶動(dòng)畫的天氣圖標(biāo)

CSS3動(dòng)畫屬性并不是很多，但重點(diǎn)其實(shí)是你怎樣去運(yùn)用它，從簡(jiǎn)單的hover狀態(tài)或復(fù)雜的小動(dòng)畫，都可以巧妙的用CSS3動(dòng)畫屬性來(lái)實(shí)現(xiàn)。

今天主要是和大家分享一個(gè)比較有創(chuàng)意、實(shí)用的CSS天氣圖標(biāo)動(dòng)畫，靜態(tài)的天氣圖標(biāo)看上去是很呆板，若加上動(dòng)畫，看起來(lái)會(huì)更加真實(shí)生動(dòng)，以下例子就是很好的參考案例。

下面我們來(lái)做一個(gè)會(huì)下雨的天氣圖標(biāo)實(shí)例，過(guò)程其實(shí)很簡(jiǎn)單哦。

STEP1: 整體HTML架構(gòu)

STEP2: 用CSS繪制云朵圖標(biāo)

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;?/*設(shè)置動(dòng)畫?rain?*/
}

STEP3: 下雨動(dòng)畫

/*?下雨動(dòng)畫?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;
}
}

最圖效果：

如果想看其它天氣動(dòng)畫圖標(biāo)的代碼，請(qǐng)查看以下網(wǎng)址。

在線演示地址&源碼：http://codepen.io/joshbader/pen/EjXgqr