用純CSS製作帶動畫的天氣表徵圖方法教程

靜態天氣表徵圖看久了顯得呆板，那麼下面就分享一個很有才創意的用CSS實現天氣帶動畫的天氣表徵圖，代碼都分享出來，以這個例子作為參考希望你能得到啟發。enjoy!本文我們主要和大家分享用純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;　　}　　.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;　　}　　}