CSS3 Animation – snow

随着移动终端的大量普及，如何节约流量，也成了移动端网页的新课题。CSS3的动画效果不需要使Javascript，就能实现一些简单的动画效果，能为网站介绍不少“体积”。本文所展示的，就是一个比较简单的CSS3动画实例。主要运动到的CSS3属性有：animation、animation-duration、keyframes、transform

body,div,p{ margin:0; padding:0; background:#D7E3EA;}
#header{
width:100%; height:315px;
background:url(images/header-bg.png);
background:url(images/snow-bg.png), url(images/header-bg.png);
animation:animate-snow 9s linear infinite;
-moz-animation:animate-snow 9s linear infinite;
-webkit-animation:animate-snow 9s linear infinite;
}
#wrapper{
width:960px; height:315px; margin:auto;
background:url(images/wrapper-bg.png) bottom no-repeat;
position:relative;
}
@keyframes animate-snow{
0%{ background-position:center 0,0 0;}
100%{ background-position:center 850px,0 0;}
}
@-moz-keyframes animate-snow
{
0%{ background-position:center 0,0 0;}
100%{ background-position:center 850px,0 0;}
}
@-webkit-keyframes animate-snow
{
0%{ background-position:center 0,0 0;}
100%{ background-position:center 850px,0 0;}
}
.christmas-tree,.house,.snowman{
position:absolute;
animation:animate-drop 1s linear;
-moz-animation:animate-drop 1s linear;
-webkit-animation:animate-drop 1s linear;
}
.christmas-tree{
width:128px; height:128px;
background:url(images/christmas_tree.png) no-repeat;
}
.house{
width:256px; height:200px;
background:url(images/houseinsnow.png) no-repeat;
left:30px; bottom:20px;
}
.snowman{
width:128px; height:128px;
background:url(images/snowman.png) no-repeat;
left:500px; bottom:30px;
animation-duration:.6s;
-moz-animation-duration:.6s;
-webkit-animation-duration:.6s;
}
.tree1{ left:300px; bottom:40px; animation-duration:.9s; -moz-animation-duration:.9s; -webkit-animation-duration:.9s;}
.tree2{ left:400px; bottom:60px; animation-duration:.7s; -moz-animation-duration:.7s; -webkit-animation-duration:.7s;}
.tree3{ left:600px; bottom:35px; animation-duration:.8s; -moz-animation-duration:.8s; -webkit-animation-duration:.8s;}
.tree4{ left:700px; bottom:60px; animation-duration:.7s; -moz-animation-duration:.7s; -webkit-animation-duration:.7s;}
.tree5{ left:800px; bottom:40px; animation-duration:.6s; -moz-animation-duration:.6s; -webkit-animation-duration:.6s;}
@keyframes animate-drop {
0% {opacity:0; transform:translate(0, -400px);}
100% {opacity:1; transform:translate(0, 0);}
}
@-moz-keyframes animate-drop {
0% {opacity:0; -moz-transform:translate(0, -400px);}
100% {opacity:1; -moz-transform:translate(0, 0);}
}
@-webkit-keyframes animate-drop {
0% {opacity:0; -webkit-transform:translate(0, -400px);}
100% {opacity:1; -webkit-transform:translate(0, 0);}
}

请大家使用现代浏览器访问： Firefox 5+, IE 10+, Chrome 6+, Safari 5+

演示地址