简单的雪景动画
html文件
<!DOCTYPE html>
<html>
<head>
<title>snow night scence by hao</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<div class="set">
<div><img src="XKY snowman.png"></div>
<div><img src="tree.png"></div>
</div>
<div class="set2">
<div><img src="snow1.png"></div>
<div><img src="snow2.png"></div>
<div><img src="snow3.png"></div>
<div><img src="snow4.png"></div>
<div><img src="snow1.png"></div>
<div><img src="snow2.png"></div>
<div><img src="snow3.png"></div>
<div><img src="snow4.png"></div>
<div><img src="snow1.png"></div>
<div><img src="snow2.png"></div>
<div><img src="snow3.png"></div>
<div><img src="snow4.png"></div>
<div><img src="snow3.png"></div>
<div><img src="snow3.png"></div>
</div>
<div class="set2 set3">
<div><img src="snow1.png"></div>
<div><img src="snow2.png"></div>
<div><img src="snow3.png"></div>
<div><img src="snow4.png"></div>
<div><img src="snow1.png"></div>
<div><img src="snow2.png"></div>
<div><img src="snow3.png"></div>
<div><img src="snow4.png"></div>
<div><img src="snow1.png"></div>
<div><img src="snow2.png"></div>
<div><img src="snow3.png"></div>
<div><img src="snow4.png"></div>
<div><img src="snow3.png"></div>
<div><img src="snow3.png"></div>
</div>
<div class="set2 set4">
<div><img src="snow1.png"></div>
<div><img src="snow2.png"></div>
<div><img src="snow3.png"></div>
<div><img src="snow4.png"></div>
<div><img src="snow1.png"></div>
<div><img src="snow2.png"></div>
<div><img src="snow3.png"></div>
<div><img src="snow4.png"></div>
<div><img src="snow1.png"></div>
<div><img src="snow2.png"></div>
<div><img src="snow3.png"></div>
<div><img src="snow4.png"></div>
<div><img src="snow3.png"></div>
<div><img src="snow3.png"></div>
</div>
</section>
</body></html>
css文件
body{
margin: 0;
padding: 0;
overflow: hidden;
}
section{
position: absolute;
height: 100%;
width: 100%;
background:radial-gradient(#333,#000);
}
.set{
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
}
.set div{
position: absolute;
display: block;
}
.set div:nth-child(1){
bottom: 70px;
left: 23%;
}
.set div:nth-child(2){
bottom: 0;
left: 34%;
}
.set2{
position:absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.set2 div{
position:absolute;
display: block;
}
.set2 div:nth-child(1){
left: 0;
animation: animate 20s linear infinite;
animation-delay: -10;
}
.set2 div:nth-child(2){
left: 8%;
animation: animate 18s linear infinite;
animation-delay: -9;
}
.set2 div:nth-child(3){
left: 16%;
animation: animate 20s linear infinite;
animation-delay: -4;
}
.set2 div:nth-child(4){
left: 24%;
animation: animate 21s linear infinite;
animation-delay: -6;
}
.set2 div:nth-child(5){
left: 32%;
animation: animate 15s linear infinite;
}
.set2 div:nth-child(6){
left: 40%;
animation: animate 19s linear infinite;
animation-delay: -10;
}
.set2 div:nth-child(7){
left: 48%;
animation: animate 16s linear infinite;
animation-delay: -8;
}
.set2 div:nth-child(8){
left: 56%;
animation: animate 18s linear infinite;
animation-delay: -2;
}
.set2 div:nth-child(9){
left: 64%;
animation: animate 20s linear infinite;
animation-delay: -5s;
}
.set2 div:nth-child(10){
left: 72%;
animation: animate 25s linear infinite;
animation-delay: -13;
}
.set2 div:nth-child(11){
left: 80%;
animation: animate 20s linear infinite;
animation-delay: -10s;
}
.set2 div:nth-child(12){
left: 88%;
animation: animate 20s linear infinite;
}
.set2 div:nth-child(13){
left: 94%;
animation: animate 21s linear infinite;
}
.set2 div:nth-child(14){
left: 98%;
animation: animate 20s linear infinite;
animation-delay: -7s;
}
@keyframes animate{
0%{
opacity: 0;
top: -10%;
transform: translateX(20px) rotate(0deg);
}
10%{
opacity: 1;
}
20%{
transform: translateX(-20px) rotate(45deg);
}
40%{
transform: translateX(20px) rotate(90deg);
}
60%{
transform: translateX(20px) rotate(135deg);
}
80%{
transform: translateX(20px) rotate(180deg);
}
100%{
top: 110%;
transform: translateX(20px) rotate(225deg);
}
}
.set3{
transform: scale(2) rotateY(180deg);
filter: blur(2px);
}
.set4{
transform: scale(0.8) rotateY(180deg);
}
效果图:
(注:图中雪花为动图,雪人扣的较为粗糙见谅)