CSS是網頁設計中不可或缺的一部分，可以讓網頁的外觀更加美觀，讓用戶體驗更加舒適。今天我們來學習如何用CSS來制作一個美麗的雪花背景。

/* 設置背景 */
body {
background-color: #aee7f8;
}
/* 制作雪花 */
.snowflake {
position: absolute;
font-size: 3em;
line-height: 1;
color: #fff;
text-shadow: 0 0 5px #fff;
}
/* 設置雪花的動畫 */
@media (prefers-reduced-motion: no-preference) {
.snowflake {
animation-name: snow-fall, snow-shake;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, 1;
animation-duration: 10s, 3s;
animation-fill-mode: forwards, forwards;
}
/* 下落動畫 */
@keyframes snow-fall {
0% {
transform: translateY(-10%);
}
100% {
transform: translateY(100vh);
}
}
/* 搖晃動畫 */
@keyframes snow-shake {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(10px);
}
}
}
/* 添加雪花圖片 */
.snowflake:before {
content: "\2744";
}

首先，我們需要設置一個背景顏色。這里我們選擇了一個淡藍色的背景。接著，我們需要制作雪花。通過設置position: absolute，我們可以讓雪花在頁面上隨機出現。
我們將雪花設置為白色，使用text-shadow添加一些模糊陰影，讓雪花更加立體。
接著，我們需要為雪花設置動畫。我們可以通過@keyframes來一步步控制雪花的下落和搖晃。
最后，我們添加了一張雪花圖片，讓雪花更加真實。這是通過:before偽元素實現的。

現在您已經了解了如何用CSS制作一個美麗的雪花背景。嘗試添加更多的雪花，并調整它們的速度和位置，讓您的網頁更加生動吧！