CSS實現雪花飄落效果，用CSS制作雪花飄落效果讓網站添加一份可愛，浪漫的冬季氛圍，既能起到裝飾作用，又不會造成太大的影響，接下來呈現CSS實現雪花飄落效果的詳細過程。

html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
.snowflake-box {
animation: snow 20s linear infinite;
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 20s linear infinite;
-ms-animation: snow 20s linear infinite;
-o-animation: snow 20s linear infinite;
}
.snowflake-box div {
font-size: 100px;
position: absolute;
top: -30px;
z-index: 10;
color: #FFF;
text-shadow: 0 0 6px #0081E9, 0 0 100px #0081E9, 0 0 200px #0081E9;
}
@keyframes snow {
0% {
transform: translateY(0) rotate(0deg);
}
100% {
transform: translateY(1000px) rotate(360deg);
}
}
@-moz-keyframes snow {
0% {
transform: translateY(0) rotate(0deg);
}
100% {
transform: translateY(1000px) rotate(360deg);
}
}
@-webkit-keyframes snow {
0% {
transform: translateY(0) rotate(0deg);
}
100% {
transform: translateY(1000px) rotate(360deg);
}
}
@-o-keyframes snow {
0% {
transform: translateY(0) rotate(0deg);
}
100% {
transform: translateY(1000px) rotate(360deg);
}
}
@-ms-keyframes snow {
0% {
transform: translateY(0) rotate(0deg);
}
100% {
transform: translateY(1000px) rotate(360deg);
}
}

代碼解釋：

1. html, body 部分：以防如果有滾動條溢出出現的問題。
2. .snowflake-box 部分：通過 snow 。然后設置動畫執行期間一遍又一遍地重復它。
3. .snowflake-box div 部分：設置每個雪花的樣式位置等。
4. @keyframes snow 部分：動畫效果的兩個狀態開始和結束狀態，其中開始狀態為初始狀態translateY(0)表示垂直不變，rotate(0deg)表示旋轉0度，旋轉的中心點默認為元素的中心位置。而結束狀態為translateY(1000px)表示垂直下降1000px再結束雪花效果，rotate(360deg)表示旋轉360度使冰雪效果看起來更加逼真。
5. @-moz-keyframes snow ，@-webkit-keyframes snow ，@-o-keyframes snow ，@-ms-keyframes snow 部分：這部分代碼為了兼容不同瀏覽器需要添加的CSS動畫參數