python画雪人怎么弄_在HTML中使用css3实现雪人动画效果

背景：圣诞节又到了，拿什么来哄女朋友开心？

项目结构：

html:

CSS3圣诞树雪人下雪动画效果

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;

}

@-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;

}

来源:孙叫兽的博客

效果图：

推荐阅读：