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

CSS3動(dòng)畫(huà)屬性并不是很多,但重點(diǎn)其實(shí)是你怎樣去運(yùn)用它,從簡(jiǎn)單的hover狀態(tài)或復(fù)雜的小動(dòng)畫(huà),都可以巧妙的用CSS3動(dòng)畫(huà)屬性來(lái)實(shí)現(xiàn)。
今天主要是和大家分享一個(gè)比較有創(chuàng)意、實(shí)用的CSS天氣圖標(biāo)動(dòng)畫(huà),靜態(tài)的天氣圖標(biāo)看上去是很呆板,若加上動(dòng)畫(huà),看起來(lái)會(huì)更加真實(shí)生動(dòng),以下例子就是很好的參考案例。
下面我們來(lái)做一個(gè)會(huì)下雨的天氣圖標(biāo)實(shí)例,過(guò)程其實(shí)很簡(jiǎn)單哦。
STEP1: 整體HTML架構(gòu)
<div class="icon rainy">
<div class="cloud"></div>
<div class="rain"></div>
</div>
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)畫(huà) rain */
}
STEP3: 下雨動(dòng)畫(huà)
/* 下雨動(dòng)畫(huà) 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;
}
}
最圖效果:
以上所述是針對(duì)CSS icon圖標(biāo)之純CSS實(shí)現(xiàn)帶動(dòng)畫(huà)效果的天氣圖標(biāo) 的全部?jī)?nèi)容,希望對(duì)大家有所幫助。
相關(guān)文章
css3使用svg實(shí)現(xiàn)天氣預(yù)報(bào)圖標(biāo)動(dòng)畫(huà)特效源碼
這是一款基于css3使用svg實(shí)現(xiàn)天氣預(yù)報(bào)圖標(biāo)動(dòng)畫(huà)特效源碼。可實(shí)現(xiàn)6種天氣預(yù)報(bào)動(dòng)畫(huà)圖標(biāo)的動(dòng)態(tài)變換效果2017-02-13CSS3實(shí)現(xiàn)帶動(dòng)畫(huà)的天氣icon圖標(biāo)特效源碼
CSS3實(shí)現(xiàn)帶動(dòng)畫(huà)的天氣icon圖標(biāo)特效源碼是一款比較有創(chuàng)意,實(shí)用的CSS天氣圖標(biāo)icon圖標(biāo)動(dòng)畫(huà),需要本段代碼的朋友前來(lái)下載源碼2016-02-22純CSS3實(shí)現(xiàn)的動(dòng)態(tài)天氣小圖標(biāo)特效源碼
是一段實(shí)現(xiàn)了各大網(wǎng)站中經(jīng)常出現(xiàn)的動(dòng)態(tài)天氣圖標(biāo)效果的代碼,本款代碼是純CSS3實(shí)現(xiàn)的天氣出太陽(yáng),下雨,雷陣雨等動(dòng)畫(huà)圖標(biāo)特效代碼,本段代碼適應(yīng)于所有網(wǎng)頁(yè)使用,有興趣的朋2015-06-16純CSS3實(shí)現(xiàn)天氣動(dòng)畫(huà)圖標(biāo)特效源碼
這是一款基于純CSS3的天氣動(dòng)畫(huà)圖標(biāo),利用CSS3特性,我們?cè)谶@里繪制了7個(gè)關(guān)于天氣的圖標(biāo),并且每一個(gè)圖標(biāo)都有一套代表當(dāng)前天氣的動(dòng)畫(huà)特效2014-10-20純css實(shí)現(xiàn)烏云密布的天氣圖標(biāo)效果
這篇文章主要介紹了純css實(shí)現(xiàn)烏云密布的天氣圖標(biāo)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-16