本期分享一下如何僅用CSS3，實現單標簽的動態晴陰雨雪。技術關鍵點就是“單標簽”和“純CSS”。先看下最終效果：
再看看HTML代碼：
<!--晴--><div class="weather sunny"></div><!--陰--><div class="weather cloudy"></div><!--雨--><div class="weather rainy"></div><!--雪--><div class="weather snowy"></div>
沒錯，就是這么任性，每個動圖就一個標簽，而且無圖無JS！下面就來詳細介紹下技術實現。
涉及到的關鍵CSS3屬性：
transform：用于移位、旋轉、縮放效果
box-shadow：利用投影實現圖像的復制(關鍵！)
clip-path：基于繪制的形狀對元素進行遮罩處理
animation：設置元素的動畫
以及實現單標簽最關鍵的:before、:after偽類運用。
通過本期分享，能學到什么？
最大的一點就是：box-shadow的另類玩法——“影分身”。
下面開始逐個講解。
2 基礎背景
圖中的藍塊背景區域，很基礎了，不用講了。
設置了區域的寬高、背景色和圓角效果。
.weather { position: relative; display: inline-block; width: 180px; height: 240px; background: #23b7e5; border-radius: 8px;}3 晴天
晴天圖標由兩個元素組成：太陽和內六角形陽光。
:before、:after 兩個偽類可以在元素內部分別“添加”一個元素，正好都利用上了。
3.1 繪制太陽
首先，用 :before實現太陽。
.sunny:before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: #F6D963; border-radius: 50%; box-shadow: 0 0 20px #ff0; z-index: 2;}content用來生成一個元素。
position、top、left、transform用來實現中心居中。
box-shadow實現外發光效果，這只是box-shadow最基本最常用的使用方式。
3.2 繪制內六角形
用 :after實現內六角形。
實現的關鍵就是使用遮罩。通過clip-path繪制一個內六角形。這就變成了一個簡單的初中幾何問題。
內六角形由兩個等邊三角形拼合而成。
合并之后，我們可以把整體劃分為若干個完全相同的小等邊三角形。
在垂直方向做個輔助線，連接中間頂部和底部兩點。不難發現，“垂直方向的最大長度”要大于“水平方向的最大長度”。
設小等邊三角形的邊長為1，以內六角形中心為坐標原點，可以計算出每個點的坐標，如下：
為了使用clip-path的百分比定位來繪制圖像，下一步需要把長度坐標轉換為百分比坐標。
設垂直方向最大長度為100%，仍以內六角形中心為坐標原點，每個點的坐標值轉換如下：
由于clip-path繪制原點是在左上角，x軸右側為正值，y軸下方為正值。需要做下坐標系轉換。即：
新x軸坐標值 = 舊x軸坐標值 + 50%
新y軸坐標值 = (舊y軸坐標值 - 50%) * -1
使用clip-path的polygon方法繪制內六角形，坐標已通過上面的步驟計算出來了。
樣式代碼如下：
.sunny:after { content: ""; position: absolute; top: 50%; left: 50%; margin: -45px 0 0 -45px; width: 90px; height: 90px; background: #FFEB3B; clip-path: polygon( 50% 0%, 65.43% 25%, 93.3% 25%, 78.87% 50%, 93.3% 75%, 64.43% 75%, 50% 100%, 35.57% 75%, 6.7% 75%, 21.13% 50%, 6.7% 25%, 35.57% 25%); z-index: 1; animation: sunScale 2s linear infinite;}@keyframes sunScale { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); }}
實現原理就是通過clip-path繪制了一個內六角形遮罩，把黃顏色背景通過遮罩變成了最終的個內六角形。
animation通過關鍵幀動畫實現了“放大縮小”交替動效。
最終效果：
4 陰天
觀察圖形發現，有兩個云朵：前面的白云和后面的烏云。貌似需要分別用 :before和 :after實現。如果這樣做的話，后續章節的雨天和雪天的雨雪元素就沒有多余的偽類可用了。所以只能用一個偽類實現兩朵云。 這里就用到了box-shadow的“影分身”了！
由于后續章節的雨天和雪天都復用了云的樣式，所以寫在一起了，代碼如下：
.cloudy:before,.rainy:before,.snowy:before { content: ""; position: absolute; top: 50%; left: 25%; transform: translate(-50%, -50%); width: 36px; height: 36px; background: #fff; border-radius: 50%; z-index: 2;}
真實的元素（真身）就是一個圓。通過box-shodow來把投影作為“分身”。
先來看看box-shadow的屬性：
box-shadow: h-shadow v-shadow blur spread color inset;
參數詳解：
h-shadow: 陰影的水平偏移量。
v-shadow: 陰影的垂直偏移量。
blur: 模糊距離(就是漸變的距離，設為0就沒有漸變)。
spread: 投影的尺寸，通過這個控制“影分身”的大小。
color: 投影顏色，通過這個實現后方的烏云。
inset: 改為內陰影。這里用不到。
先復制一個影分身試試：
box-shadow: #fff 22px -15px 0 6px;
繼續復制多個影分身，帶全部影分身的完整代碼如下：
.cloudy:before,.rainy:before,.snowy:before { content: ""; position: absolute; top: 50%; left: 25%; transform: translate(-50%, -50%); width: 36px; height: 36px; background: #fff; border-radius: 50%; box-shadow: #fff 22px -15px 0 6px, #fff 57px -6px 0 2px, #fff 87px 4px 0 -4px, #fff 33px 6px 0 6px, #fff 61px 6px 0 2px, #ccc 29px -23px 0 6px, #ccc 64px -14px 0 2px, #ccc 94px -4px 0 -4px; z-index: 2;}
五個分身的白圓（#fff）,三個分身的灰圓（#ccc）拼成了兩朵云。
再給云朵加上“上下浮動”的動效：
.cloudy:before { animation: cloudMove 2s linear infinite;}@keyframes cloudMove { 0% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -60%); } 100% { transform: translate(-50%, -50%); }}
5 雨天
云朵的代碼直接復用第4章的陰天。這里使用 :after 偽類實現雨滴。
先實現一個雨滴（為方便觀看，暫時隱藏云朵）：
.rainy:after { content: ""; position: absolute; top:50%; left: 25%; width: 4px; height: 14px; background: #fff; border-radius: 2px;}
然后通過box-shadow“影分身”：
.rainy:after { content: ""; position: absolute; top:50%; left: 25%; width: 4px; height: 14px; background: #fff; border-radius: 2px;+ box-shadow:+ #fff 25px -10px 0,+ #fff 50px 0 0,+ #fff 75px -10px 0,+ #fff 0 25px 0,+ #fff 25px 15px 0,+ #fff 50px 25px 0,+ #fff 75px 15px 0,+ #fff 0 50px 0,+ #fff 25px 40px 0,+ #fff 50px 50px 0,+ #fff 75px 40px 0; }
再加入下雨的移動動效，修改如下：
.rainy:after { ...(略)+ animation: rainDrop 2s linear infinite; }+ @keyframes rainDrop {+ 0% {+ transform: translate(0, 0) rotate(10deg);+ }+ 100% {+ transform: translate(-4px, 24px) rotate(10deg);+ box-shadow:+ #fff 25px -10px 0,+ #fff 50px 0 0,+ #fff 75px -10px 0,+ #fff 0 25px 0,+ #fff 25px 15px 0,+ #fff 50px 25px 0,+ #fff 75px 15px 0,+ rgba(255, 255, 255, 0) 0 50px 0,+ rgba(255, 255, 255, 0) 25px 40px 0,+ rgba(255, 255, 255, 0) 50px 50px 0,+ rgba(255, 255, 255, 0) 75px 40px 0;+ }+ }
動畫添加了10度的旋轉，讓雨滴傾斜，以及垂直方向的移動。
這里的關鍵就是：雖然本質是垂直移動，但為了看上去是“循環”效果，需要將最下面的雨滴進行透明漸變，同時調節X和Y軸的值，讓最終位置正好跟初始位置重合，就不會顯得“斷開”。
我們生成的是三行雨滴，第一行被云朵擋住了，實際能看到的是下面兩行。在第一行移動到第二行位置的時候，原第三行已經透明看不見了，正好與初始狀態一樣，實現了無縫循環拼接。
6 雪天
雪天與雨天的區別就是把雨滴換成圓形，取消旋轉角度。 代碼如下：
.snowy:after { content: ""; position: absolute; top:50%; left: 25%; width: 8px; height: 8px; background: #fff; border-radius: 50%; box-shadow: #fff 25px -10px 0, #fff 50px 0 0, #fff 75px -10px 0, #fff 0 25px 0, #fff 25px 15px 0, #fff 50px 25px 0, #fff 75px 15px 0, #fff 0 50px 0, #fff 25px 40px 0, #fff 50px 50px 0, #fff 75px 40px 0; animation: snowDrop 2s linear infinite; }@keyframes snowDrop { 0% { transform: translateY(0); } 100% { transform: translateY(25px); box-shadow: #fff 25px -10px 0, #fff 50px 0 0, #fff 75px -10px 0, #fff 0 25px 0, #fff 25px 15px 0, #fff 50px 25px 0, #fff 75px 15px 0, rgba(255, 255, 255, 0) 0 50px 0, rgba(255, 255, 255, 0) 25px 40px 0, rgba(255, 255, 255, 0) 50px 50px 0, rgba(255, 255, 255, 0) 75px 40px 0; }}
7 全部源碼
源碼如下，方便粘貼保存為html：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title單標簽！純CSS實現動態晴陰雨雪</title></head><body> <div class="weather sunny"></div> <div class="weather cloudy"></div> <div class="weather rainy"></div> <div class="weather snowy"></div></body><style>.weather { position: relative; display: inline-block; width: 180px; height: 240px; background: #23b7e5; border-radius: 8px;}.sunny:before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: #F6D963; border-radius: 50%; box-shadow: 0 0 20px #ff0; z-index: 2;}.sunny:after { content: ""; position: absolute; top: 50%; left: 50%; margin: -45px 0 0 -45px; width: 90px; height: 90px; background: #FFEB3B; clip-path: polygon( 50% 0%, 65.43% 25%, 93.3% 25%, 78.87% 50%, 93.3% 75%, 64.43% 75%, 50% 100%, 35.57% 75%, 6.7% 75%, 21.13% 50%, 6.7% 25%, 35.57% 25%); z-index: 1; animation: sunScale 2s linear infinite;}@keyframes sunScale { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); }}.cloudy:before,.rainy:before,.snowy:before { content: ""; position: absolute; top: 50%; left: 25%; transform: translate(-50%, -50%); width: 36px; height: 36px; background: #fff; border-radius: 50%; box-shadow: #fff 22px -15px 0 6px, #fff 57px -6px 0 2px, #fff 87px 4px 0 -4px, #fff 33px 6px 0 6px, #fff 61px 6px 0 2px, #ccc 29px -23px 0 6px, #ccc 64px -14px 0 2px, #ccc 94px -4px 0 -4px; z-index: 2;}.cloudy:before { animation: cloudMove 2s linear infinite;}@keyframes cloudMove { 0% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -60%); } 100% { transform: translate(-50%, -50%); }}.rainy:after { content: ""; position: absolute; top:50%; left: 25%; width: 4px; height: 14px; background: #fff; border-radius: 2px; box-shadow: #fff 25px -10px 0, #fff 50px 0 0, #fff 75px -10px 0, #fff 0 25px 0, #fff 25px 15px 0, #fff 50px 25px 0, #fff 75px 15px 0, #fff 0 50px 0, #fff 25px 40px 0, #fff 50px 50px 0, #fff 75px 40px 0; animation: rainDrop 2s linear infinite; }@keyframes rainDrop { 0% { transform: translate(0, 0) rotate(10deg); } 100% { transform: translate(-4px, 24px) rotate(10deg); box-shadow: #fff 25px -10px 0, #fff 50px 0 0, #fff 75px -10px 0, #fff 0 25px 0, #fff 25px 15px 0, #fff 50px 25px 0, #fff 75px 15px 0, rgba(255, 255, 255, 0) 0 50px 0, rgba(255, 255, 255, 0) 25px 40px 0, rgba(255, 255, 255, 0) 50px 50px 0, rgba(255, 255, 255, 0) 75px 40px 0; }}.snowy:after { content: ""; position: absolute; top:50%; left: 25%; width: 8px; height: 8px; background: #fff; border-radius: 50%; box-shadow: #fff 25px -10px 0, #fff 50px 0 0, #fff 75px -10px 0, #fff 0 25px 0, #fff 25px 15px 0, #fff 50px 25px 0, #fff 75px 15px 0, #fff 0 50px 0, #fff 25px 40px 0, #fff 50px 50px 0, #fff 75px 40px 0; animation: snowDrop 2s linear infinite; }@keyframes snowDrop { 0% { transform: translateY(0); } 100% { transform: translateY(25px); box-shadow: #fff 25px -10px 0, #fff 50px 0 0, #fff 75px -10px 0, #fff 0 25px 0, #fff 25px 15px 0, #fff 50px 25px 0, #fff 75px 15px 0, rgba(255, 255, 255, 0) 0 50px 0, rgba(255, 255, 255, 0) 25px 40px 0, rgba(255, 255, 255, 0) 50px 50px 0, rgba(255, 255, 255, 0) 75px 40px 0; }}</style></html>
總結
以上所述是小編給大家介紹的使用純CSS實現動態晴陰雨雪(單標簽),希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
