圣诞节来了，冬天来了，怎么可以没有雪花纷飞效果，昨天下班前折腾了一会儿，弄了个雪花纷飞的实例，有兴趣的可以交流分享下。
原文链接：http://www.html5think.com/article/index/id/80
CSS3代码节选：
.main:before{
content: " ";
display: block;
position: absolute;
top:;
left: -50%;
width: 200%;
height: 100%;
z-index:;
-webkit-background-size: 10rem 10rem;
-moz-background-size: 10rem 10rem;
background-size: 10rem 10rem;
background-image: url(./images/snow2.png);
-webkit-animation: "snow" 28s linear infinite;
-moz-animation: "snow" 28s linear infinite;
-o-animation: "snow" 28s linear infinite;
-ms-animation: "snow" 28s linear infinite;
}
.main:after{
content: " ";
display: block;
position: absolute;
top:;
left: -50%;
width: 200%;
height: 100%;
z-index:;
-webkit-background-size: 10rem 10rem;
-moz-background-size: 10rem 10rem;
background-size: 10rem 10rem;
background-image: url(./images/snow1.png);
-webkit-animation: "snow" 18s linear infinite;
-moz-animation: "snow" 18s linear infinite;
-o-animation: "snow" 18s linear infinite;
-ms-animation: "snow" 18s linear infinite;
animation: "snow" 18s linear infinite;
}
@-moz-keyframes snow{
0%{
background-position-x:;
background-position-y:;
}
50%{
background-position-y:20rem;
}
100%{
background-position-x:20rem;
background-position-y:40rem;
}
}
@-webkit-keyframes snow{
0%{
background-position-x:;
background-position-y:;
}
50%{
background-position-y:20rem;
}
100%{
background-position-x:20rem;
background-position-y:40rem;
}
}
@-o-keyframes snow{
0%{
background-position-x:;
background-position-y:;
}
50%{
background-position-y:20rem;
}
100%{
background-position-x:20rem;
background-position-y:40rem;
}
}
@keyframes snow{
0%{
background-position-x:;
background-position-y:;
}
50%{
background-position-y:20rem;
}
100%{
background-position-x:20rem;
background-position-y:40rem;
}
}