CSS3做雪花

本文介紹如何使用CSS3來實現簡單的雪花效果。首先可以使用偽元素“before”或“after”來創建雪花樣式。如下所示：

.snowflake:before{
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #fff;
transform: rotate(45deg);
}

上述代碼會生成一個三角形。接下來，將三角形放在具有絕對定位的div元素中，并以循環方式重復生成多個三角形，就可以得到一個簡單的雪花效果。該代碼如下：

.snowflake{
position: absolute;
top: 0px;
animation: falling 5s linear infinite;
}
.snowflake:before{
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #fff;
transform: rotate(45deg);
}
.snowflake:nth-child(1){
left: -5px;
}
.snowflake:nth-child(2){
left: 10px;
}
.snowflake:nth-child(3){
left: 25px;
}
.snowflake:nth-child(4){
left: 40px;
}
.snowflake:nth-child(5){
left: 55px;
}
@keyframes falling{
0% {
top:-50px;
}
100% {
top: 100%;
}
}

上述代碼使用CSS3的@keyframes規則實現雪花的下落效果，并且使用“nth-child”選擇器按位置排列多個雪花，最終效果如下圖所示：


至此，使用CSS3實現簡單的雪花效果就完成了。代碼比較簡單，但是較復雜的動畫效果還需要借助JavaScript來完成。希望本文能為大家提供一些參考。