CSS3動畫雪花

/* 創建一個偽元素 */
.snowflake {
position: absolute;
content: "";
width: 10px;
height: 10px;
background: #FFF;
border-radius: 50%;
pointer-events: none;
animation: snowfall 10s linear infinite;
}
/* 創建雪花下落動畫 */
@keyframes snowfall {
0% {
transform: translate(0, -100%);
}
100% {
transform: translate(0, 100vh);
}
}
/* 添加雪花到頁面 */
for (var i = 0; i< 50; i++) {
var snowflake = document.createElement("div");
snowflake.className = "snowflake";
snowflake.style.left = Math.random() * 100 + "%";
snowflake.style.animationDelay = (Math.random() * 10) + "s";
document.body.appendChild(snowflake);
}

以上CSS和JavaScript代碼可以使您的網頁上下雪花效果，詳細解釋如下。

CSS部分中使用了偽元素來作為雪花元素，在CSS中指定了其大小、背景顏色及動畫屬性；

在keyframes中創建了雪花下落的動畫，從頂部開始到底部結束，過程中的變化通過transform實現；

JavaScript部分則生成了50個雪花元素，并使用隨機數指定其位置以及延遲屬性，實現了隨機下落的效果。