分享一個用強大的css3動畫做的雪花背景，做網站背景很漂亮~
補充一點關于animation的知識點
animation
必填項
animation-name 動畫名稱（關鍵幀名稱）
animation-duration 動畫持續(xù)時間
選填
animation-timing-function 動畫運動形式
linear 勻速。
ease 緩沖。
ease-in 由慢到快。
ease-out 由快到慢。
ease-in-out 由慢到快再到慢。
cubic-bezier(number, number, number, number)： 特定的貝塞爾曲線類型，4個數(shù)值需在[0, 1]區(qū)間內
animation-delay 動畫延遲
！注意只是第一次
animation-iteration-count 重復次數(shù)
infinite 無限
animation-direction 播放前重置
動畫是否重置后再開始播放
alternate 動畫直接從上一次停止的位置開始執(zhí)行
normal 動畫第二次直接跳到0%的狀態(tài)開始執(zhí)行
animation-fill-mode 設置動畫時間之外的狀態(tài)
none 不設置動畫之外的狀態(tài)
forwards 動畫結束時的狀態(tài)
backwards 動畫開始時的狀態(tài)
both 動畫結束或開始的狀態(tài)
上代碼~
<html>
<head>
<title>Title</title>
<style>
body {
margin: 0;
background-color: skyblue;
}
#snowMask {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 999;
/*設置背景圖*/
background: url('img/snow1.png'), url('img/snow2.png');
pointer-events: none;
/*調用動畫*/
-webkit-animation: snow 15s linear infinite;
animation: snow 15s linear infinite;
}
/*聲明幀動畫，關鍵幀需要通過animation調用*/
@keyframes snow {
0% {
background-position: 0 0, 0 0;
}
100% {
background-position: 500px 1000px, 500px 500px;
}
}
</style>
</head>
<body>
<div id="snowMask" style="display: block;"></div>
</body>
</html>
圖片在這里=>
snow1.png
snow2.png
