效果
效果如下
實現思路
dom結構
用兩個嵌套的div容器，父容器來控制圖標顯示的位置，子容器用來寫烏云的樣式。
<div class="container"> <div class="cloudy"></div></div>
css樣式
1、父容器樣式，順便給整個頁面加一個背景色，方便預覽
body{ background: rgba(73, 74, 95, 1);}.container{ width: 170px; height: 170px; position: relative; margin: 250px auto;}2、烏云的樣式，烏云有一個上下移動的動畫。這兒關鍵是box-shadow屬性的使用，白色的話就可以當作多云的天氣圖標啦~
.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偽元素，別忘了同樣是有移動動畫的
.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，搞定。按著步驟來，你也可以在你的頁面上實現烏云的天氣圖標咯~
總結
以上所述是小編給大家介紹的純css實現烏云密布的天氣圖標效果,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
