在HTML中使用css3實現雪人動畫效果

阿新 • • 發佈：2020-12-28

此文轉載自：https://blog.csdn.net/weixin_41937552/article/details/111715092

背景：聖誕節又到了，拿什麼來哄女朋友開心？

專案結構：

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3聖誕樹雪人下雪動畫效果</title>

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

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

</head>

<body>

<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>
<div style="text-align:center;">
<p>來源:<a href="sunmenglei.blog.csdn.net" target="_blank">孫叫獸的部落格</a></p>
</div>
<script src="http://down.admin5.comjs/tongji.js"></script>
<script src="http://down.admin5.comjs/youxia.js" type="text/javascript"></script>
</body>
</html>

圖片下載地址：https://download.csdn.net/download/weixin_41937552/13786683

效果圖：

推薦閱讀：

聖誕節，程式設計師應該給女朋友送一個線上聖誕樹