下雪花 CSS 是一種用 CSS 實現下雪效果的技術。這種技術可以在網頁上營造出冬天的氣氛，為用戶帶來視覺上的愉悅感受。
實現下雪效果的關鍵是要在頁面上生成一堆雪花，并讓它們實現下落的效果。下面是一段使用「CSS3 動畫」實現下雪效果的樣例代碼，我們可以將其放在
<head>標簽中：
<style>
.snowflake {
position: absolute;
top: -10px;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
opacity: .7;
transform: rotate(45deg);
animation: falling 3s infinite linear;
}
@keyframes falling {
from {top: -10px; transform: rotate(45deg);}
to {top: 100%; transform: rotate(405deg);}
}
</style>以上代碼實現了一個「雪花」的效果，下面我們需要使用 JavaScript 來生成多個「雪花」并將其添加進頁面中，代碼如下：
<script>
// 獲取窗口的寬度和高度
var w = window.innerWidth;
var h = window.innerHeight;
// 循環生成雪花
for (var i = 0; i < 40; i++) {
var snowflake = document.createElement("div");
snowflake.className = "snowflake";
snowflake.style.left = Math.random() * w + "px";
snowflake.style.top = -Math.random() * h + "px";
document.body.appendChild(snowflake);
}
</script>通過以上代碼，我們就可以在頁面上實現一個「下雪」的效果了。當然，我們也可以通過修改 CSS 樣式，調整雪花的大小、顏色等參數來創建不同的下雪效果。
下一篇html5加速旋轉代碼