圣诞节来了,雪花纷飞的CSS3动画,还不首页用起来
圣诞节来了,冬天来了,怎么可以没有雪花纷飞效果,昨天下班前折腾了一会儿,弄了个雪花纷飞的实例,有兴趣的可以交流分享下。
原文链接: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; } }