如果你想编一个简单的圣诞树送给你的男/女朋友的话， 这里也许有你要的东西，
对于你也许他很简单，不值一提。 但是对于小白，也许是他入门HTML、css3的极佳小项目 代码运行方式：代码运行很简单，解压缩文件夹，即可获得如下文件，只需要双击index.html即可运行。源代码的话可以用编辑器打开index.html即可查看或者修改。
代码我已分享，获取方式如下（文章底部有福利）：
获取方式一：csdn下载
获取方式二：关注公众号：zhulin1028。回复：【css动画】即可免费获取。
上动图：
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> 复制代码
CSS3部分
<style type="text/css"> body{margin:0;padding:0;list-style-type:none;} .header{ margin: 0 0 30px; background: url(css/img/header-bg.png); background: url(css/img/snow-bg.png) repeat-y center, url(css/img/header-bg.png); -webkit-animation: animate-snow 9s linear infinite; -moz-animation: animate-snow 9s linear infinite; -ms-animation: animate-snow 9s linear infinite; animation: animate-snow 9s linear infinite; } .zhulin{ margin: 0 0 30px; background: url(css/img/zhulin1028.png) no-repeat; width:100%; height:300px; } @-webkit-keyframes animate-snow { 0% { background-position: center 0, 0 0;} 100% { background-position: center 885px, 0 0;} } @-moz-keyframes animate-snow { 0% { background-position: center 0, 0 0;} 100% { background-position: center 885px, 0 0;} } @-ms-keyframes animate-snow { 0% { background-position: center 0, 0 0;} 100% { background-position: center 885px, 0 0;} } @keyframes animate-snow { 0% { background-position: center 0, 0 0;} 100% { background-position: center 885px, 0 0;} } .wrapper{ width: 960px; height: 315px; margin: auto; overflow: hidden; position: relative; background-image: url(css/img/wrapper-bg.png); background-repeat: no-repeat; background-position: bottom; } @-moz-keyframes animate-drop { 0% {opacity:0;-moz-transform: translate(0, -315px);} 100% {opacity:1;-moz-transform: translate(0, 0);} } @-webkit-keyframes animate-drop { 0% {opacity:0;-webkit-transform: translate(0, -315px);} 100% {opacity:1;-webkit-transform: translate(0, 0);} } @-ms-keyframes animate-drop { 0% {opacity:0;-ms-transform: translate(0, -315px);} 100% {opacity:1;-ms-transform: translate(0, 0);} } @keyframes animate-drop { 0% {opacity:0;transform: translate(0, -315px);} 100% {opacity:1;transform: translate(0, 0);} } .christmas-tree, .snowman { position: absolute; -moz-animation: animate-drop 1s linear; -webkit-animation: animate-drop 1s linear; -ms-animation: animate-drop 1s linear; animation: animate-drop 1s linear; } .christmas-tree { width: 112px; height: 137px; background: url(css/img/christmas-tree.png); } .snowman { width: 115px; height: 103px; top: 195px; left: 415px; background: url(css/img/snowman.png); -moz-animation-duration: .6s; -webkit-animation-duration: .6s; -ms-animation-duration: .6s; animation-duration: .6s; } .tree1 { top: 165px; left: 35px; -moz-animation-duration: .6s; -webkit-animation-duration: .6s; -ms-animation-duration: .6s; animation-duration: .6s; } .tree2 { left: 185px; top: 175px; -moz-animation-duration: .9s; -webkit-animation-duration: .9s; -ms-animation-duration: .9s; animation-duration: .9s; } .tree3 { left: 340px; top: 125px; -moz-animation-duration: .7s; -webkit-animation-duration: .7s; -ms-animation-duration: .7s; animation-duration: .7s; } .tree4 { left: 555px; top: 155px; -moz-animation-duration: .8s; -webkit-animation-duration: .8s; -ms-animation-duration: .8s; animation-duration: .8s; } .tree5 { left: 710px; top: 170px; -moz-animation-duration: .7s; -webkit-animation-duration: .7s; -ms-animation-duration: .7s; animation-duration: .7s; } .tree6 { left: 855px; top: 125px; -moz-animation-duration: .6s; -webkit-animation-duration: .6s; -ms-animation-duration: .6s; animation-duration: .6s; } </style>
作者：zhulin1028
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
