<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>jQuery圣诞下雪动画</title>
<meta name="keywords" content=" jQuery圣诞下雪动画" />
<meta name="description" content=" jQuery圣诞下雪动画" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<p id="days"> </p>
</div>
<script src='http://www.5iweb.com.cn/statics/js/jquery.1.7.1.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Css代码：
@import url('https://fonts.googleapis.com/css?family=Cookie');
body {
background-color: #F24236;
width: 100%;
font-family: 'Cookie', cursive;
}
.container {
position: absolute;
top: 90px; left: 180px;
}
#days {
font-size: 50px;
color: #FFF;
text-align: center;
letter-spacing: 3px;
}
.drop {
position: absolute;
top: 0;
z-index: -1;
opacity: 0;
}
.snow {
height: 8px;
width: 8px;
border-radius: 100%;
background-color: #FFF;
box-shadow: 0 0 10px #FFF
}
.animate {
animation: falling 8.5s infinite ease-in;
}
@keyframes falling {
0% {top: 0; opacity: 1;}
100% {top: 1500px; opacity: 0}
}
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h15536.shtml
