CSS 漂浮雪花是一種非常流行的前端動效，在假期網站或者節日頁面上經常可以看到它的身影，今天我們就來聊聊它的實現方法。

/* CSS */
@keyframes snow {
0% {
transform: translateY(0);
}
100% {
transform: translateY(800px);
}
}
.snowflake {
position: absolute;
top: -10px;
left: calc(2vw * var(--i));
animation: snow linear infinite;
animation-delay: calc(var(--s) * -1s);
font-size: 4rem;
}

首先，我們需要通過 keyframes 來定義動畫的效果，在這里我們使用 translateY 來讓雪花從頂部向下落。接著，在 .snowflake 選擇器中，我們使用 position 來將其設為絕對定位，使用 top 來控制其出現的位置，在這里因為我們要讓雪花像真正的雪花一樣飄，所以需要讓它們出現在容器的上方。然后，我們使用動畫屬性 animation 來讓雪花播放 snow 這個動畫，使用 infinite 來讓它一直循環播放。最后，我們為每一個雪花設置不同的動畫延遲 animation-delay 和隨機字體大小 font-size。

接下來，我們需要在 HTML 中使用上述代碼來實現漂浮雪花：

...

在這里，我們使用了 span 元素來包裹每一個雪花，并使用 .container 來控制整個容器的樣式。

最后，我們需要為容器添加背景圖，并讓容器的高度和寬度充滿整個頁面：

/* CSS */
.container {
background-image: url('snowflake.png');
background-repeat: repeat;
background-size: contain;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

在這里，我們使用 background-image 屬性來添加背景圖，并使用 repeat 來讓其重復出現。然后，我們使用 background-size 來控制背景圖的大小和位置，使用 position 、 top 和 left 來將容器充滿整個頁面。

如此一來，我們就完成了一個簡單的漂浮雪花的實現，它可以讓你的頁面更加有趣、更加與眾不同，幫助你吸引更多用戶的關注！