圣诞节来了,冬天来了,怎么可以没有雪花纷飞效果,昨天下班前折腾了一会儿,弄了个雪花纷飞的实例,有兴趣的可以交流分享下。
原文链接:http://www.html5think.com/article/index/id/80
CSS3代码节选:
.main:before{content: " ";display: block;position: absolute;top: 0;left: -50%;width: 200%;height: 100%;z-index: 1;-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: 0;left: -50%;width: 200%;height: 100%;z-index: 10;-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:0;background-position-y:0;}50%{background-position-y:20rem;}100%{background-position-x:20rem;background-position-y:40rem;} }@-webkit-keyframes snow{0%{background-position-x:0;background-position-y:0;}50%{background-position-y:20rem;}100%{background-position-x:20rem;background-position-y:40rem;} }@-o-keyframes snow{0%{background-position-x:0;background-position-y:0;}50%{background-position-y:20rem;}100%{background-position-x:20rem;background-position-y:40rem;} }@keyframes snow{0%{background-position-x:0;background-position-y:0;}50%{background-position-y:20rem;}100%{background-position-x:20rem;background-position-y:40rem;} }