純CSS如何實現動畫的天氣圖標

靜態的天氣圖標看久了顯得呆板，那麼下面就分享一個很有才創意的用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;

}

{

position: relative;

display: inline-block;

width: 12em;

height: 10em;

font-size: 1em; /* control icon size here */

}

d {

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;

}

d: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;