CSS3下雪动画效果

CSS3下雪动画效果63
HTML
<div class="header">  <div class="wrapper">    <div class="christmas-tree tree1"></div>    <div class="christmas-tree tree2"></div>    <div class="christmas-tree tree3"></div>    <div class="snowman"></div>    <div class="christmas-tree tree4"></div>    <div class="christmas-tree tree5"></div>    <div class="christmas-tree tree6"></div>  </div></div>
CSS查看页面源代码演示时,您可以找到完整的 CSS3 代码为了实现下雪的效果,您需要为第一次.header背景background-position属性进行动画处理。作为一个快速说明,浏览器不支持多个背景,雪将不可见此示例。
.header{margin: 0 0 30px;    background: url(header-bg.png);    background: url(snow-bg.png) repeat-y center, url(header-bg.png);    animation: animate-snow 9s linear infinite;}@keyframes animate-snow{    0% { background-position: center 0, 0 0;}    100% { background-position: center 885px, 0 0;}}.wrapper元素基本上持有我们圣诞树与雪人。请注意position: relative:.wrapper{    width: 960px;    height: 315px;    margin: auto;    overflow: hidden;    position: relative;    background: url(wrapper-bg.png) no-repeat bottom;}
为圣诞树、animation-duration值是随机改变以创建一个很酷的效果:
@keyframes animate-drop {       0% {opacity:0;transform: translate(0, -315px);}    100% {opacity:1;transform: translate(0, 0);}}.christmas-tree,.snowman {    position: absolute;    animation: animate-drop 1s linear;}.christmas-tree {    width: 112px;    height: 137px;    background: url(christmas-tree.png);}.snowman {    width: 115px;    height: 103px;    top: 195px;    left: 415px;    background: url(snowman.png);    animation-duration: .6s;}.tree1 {    top: 165px;    left: 35px;    animation-duration: .6s;}.tree2 {    left: 185px;    top: 175px;    animation-duration: .9s;}.tree3 {    left: 340px;    top: 125px;    animation-duration: .7s;}.tree4 {    left: 555px;    top: 155px;    animation-duration: .8s;}.tree5 {    left: 710px;    top: 170px;    animation-duration: .7s;}.tree6 {    left: 855px;    top: 125px;    animation-duration: .6s;}

也许你还喜欢