分享一個用強(qiáng)大的css3動畫做的雪花背景扎附，做網(wǎng)站背景很漂亮~
補(bǔ)充一點關(guān)于animation的知識點
animation
必填項
animation-name 動畫名稱（關(guān)鍵幀名稱）
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ū)間內(nèi)
animation-delay 動畫延遲
！注意只是第一次
animation-iteration-count 重復(fù)次數(shù)
infinite 無限
animation-direction 播放前重置
動畫是否重置后再開始播放
alternate 動畫直接從上一次停止的位置開始執(zhí)行
normal 動畫第二次直接跳到0%的狀態(tài)開始執(zhí)行
animation-fill-mode 設(shè)置動畫時間之外的狀態(tài)
none 不設(shè)置動畫之外的狀態(tài)
forwards 動畫結(jié)束時的狀態(tài)
backwards 動畫開始時的狀態(tài)
both 動畫結(jié)束或開始的狀態(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;
/*設(shè)置背景圖*/
background: url('img/snow1.png'), url('img/snow2.png');
pointer-events: none;
/*調(diào)用動畫*/
-webkit-animation: snow 15s linear infinite;
animation: snow 15s linear infinite;
}
/*聲明幀動畫昧狮，關(guān)鍵幀需要通過animation調(diào)用*/
@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
