純css如何實(shí)現(xiàn)烏云密布的天氣圖標(biāo)效果-創(chuàng)新互聯(lián)
這篇文章主要介紹純css如何實(shí)現(xiàn)烏云密布的天氣圖標(biāo)效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)建站云計(jì)算的互聯(lián)網(wǎng)服務(wù)提供商,擁有超過(guò)13年的服務(wù)器租用、
電信機(jī)房托管、云服務(wù)器、
虛擬主機(jī)、網(wǎng)站系統(tǒng)開(kāi)發(fā)經(jīng)驗(yàn)，已先后獲得國(guó)家工業(yè)和信息化部頒發(fā)的互聯(lián)網(wǎng)數(shù)據(jù)中心業(yè)務(wù)許可證。專業(yè)提供云主機(jī)、
虛擬主機(jī)、
主機(jī)域名、VPS主機(jī)、云服務(wù)器、香港云服務(wù)器、免備案服務(wù)器等。
效果
效果如下
實(shí)現(xiàn)思路
使用box-shadow屬性畫(huà)幾個(gè)灰色的圓，將這些圓錯(cuò)落的組合在一起，形成烏云圖案
after偽元素寫(xiě)烏云下的投影
增加動(dòng)畫(huà)
dom結(jié)構(gòu)
用兩個(gè)嵌套的div容器，父容器來(lái)控制圖標(biāo)顯示的位置，子容器用來(lái)寫(xiě)烏云的樣式。
css樣式
1、父容器樣式，順便給整個(gè)頁(yè)面加一個(gè)背景色，方便預(yù)覽
body{
background: rgba(73, 74, 95, 1);
}
.container{
width: 170px;
height: 170px;
position: relative;
margin: 250px auto;
}2、烏云的樣式，烏云有一個(gè)上下移動(dòng)的動(dòng)畫(huà)。這兒關(guān)鍵是box-shadow屬性的使用，白色的話就可以當(dāng)作多云的天氣圖標(biāo)啦~
.cloudy{
width: 50px;
height: 50px;
position: absolute;
top: 70px;
left: 80px;
margin-left: -60px;
background: #ccc;
border-radius: 50%;
box-shadow: #ccc 65px -10px 0 -5px,
#ccc 25px -25px,
#ccc 30px 10px,
#ccc 60px 15px 0 -10px,
#ccc 85px 5px 0 -5px;
animation: cloudy 5s ease-in-out infinite;
}
@keyframes cloudy{
50%{
transform: translateY(-20px);
}
}3、投影的樣式，可以使用after偽元素，別忘了同樣是有移動(dòng)動(dòng)畫(huà)的
.cloudy::after{
content: '';
width: 120px;
height: 15px;
position: absolute;
bottom: -60px;
left: 5px;
background: #000;
border-radius: 50%;
opacity: 0.2;
animation: cloudy-shadow 5s ease-in-out infinite;
transform: scale(0.7);
}
@keyframes cloudy-shadow{
50%{
transform: translateY(20px) scale(1);
opacity: 0.05;
}
}OK，搞定。按著步驟來(lái)，你也可以在你的頁(yè)面上實(shí)現(xiàn)烏云的天氣圖標(biāo)咯~
以上是“純css如何實(shí)現(xiàn)烏云密布的天氣圖標(biāo)效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)頁(yè)題目：純css如何實(shí)現(xiàn)烏云密布的天氣圖標(biāo)效果-創(chuàng)新互聯(lián)
URL鏈接：
http://weahome.cn/article/dpijsg.html
重慶分公司
重慶分公司
