在這個寒冷的冬季，如何讓你的網站更加有節日氣氛呢？為什么不嘗試添加一些漂亮的雪花效果呢？今天，我們將會介紹如何使用純 CSS 來創建一種簡單且漂亮的雪花效果。

.snowflake {
position: absolute;
margin: auto;
height: 10px;
width: 10px;
background: white;
border-radius: 50%;
animation: snow 1s infinite ease-in-out;
}
@keyframes snow {
0% {
transform: translateY(0) rotate(0);
}
100% {
transform: translateY(50vh) rotate(360deg);
}
}

我們使用了一個帶有動畫的 CSS 模板來創建雪花效果。這個動畫中用到了 transform 屬性來移動雪花的位置，并通過 animation 屬性來讓雪花緩慢地飄落。

我們把這個效果應用到 .snowflake 類名中，然后在需要添加雪花效果的 HTML 元素中應用這個類名即可。

<div class="snowflake"></div>

在 HTML 中，我們只需創建一個 div 元素，并在其 class 屬性中添加 snowflake 這個類名。接下來，這個 div 元素將會變成一個帶有雪花效果的元素。

最后，我們只需要調整一下我們的 CSS 樣式，以使雪花效果更加逼真。

body {
background: #333;
}
.snowflake {
box-shadow: 0 0 1px 0 rgba(255,255,255,0.8),
0 1px 3px 0 rgba(0,0,0,0.2);
animation-delay: calc(1s * var(--delay));
animation-duration: calc(5s * var(--duration));
transform-origin: center;
}
@keyframes snow {
0% {
transform: translateY(0) rotate(0);
}
100% {
transform: translateY(50vh) rotate(360deg);
}
}

在這里，我們添加了一個 box-shadow 屬性來給雪花添加陰影效果，調整了 animation-delay 和 animation-duration 兩個屬性來讓雪花效果變得更加逼真，同時設置 transform-origin 屬性來讓雪花以中心點為旋轉中心。

現在，我們已經成功地為我們的網站添加了一種漂亮的雪花效果！