CSS中icon圖標之純CSS如何實現帶動畫效果的天氣圖標

這篇文章將為大家詳細講解有關CSS中icon圖標之純CSS如何實現帶動畫效果的天氣圖標 ，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

效果： 

下面我們來做一個會下雨的天氣圖標實例，過程其實很簡單哦。

STEP1: 整體HTML架構 

<div class="icon rainy"> 
<div class="cloud"></div> 
<div class="rain"></div> 
</div>

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; 
} 
}

最圖效果：

關于“CSS中icon圖標之純CSS如何實現帶動畫效果的天氣圖標 ”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。