CSS3的动画特效——城市
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="wrap">
<div class="groundBack"><img src="img/groundBack.png" /></div>
<div class="groundFront">
<img src="img/groundFront.png" />
<img src="img/groundFront.png" />
<img src="img/groundFront.png" />
</div>
<div class="groundMid">
<img src="img/groundMid.png" />
<img src="img/groundMid.png" />
</div>
<div class="friend"><img src="img/friendshipShell.png" /></div>
<div class="downCenter"><img src="img/dowEventCenter.png" /></div>
<div class="glockenspiel"><img src="img/Glockenspiel.png" /></div>
<div class="skyline">
<img src="img/skyline.png" />
<img src="img/skyline.png" />
<img src="img/skyline.png" />
<img src="img/skyline.png" />
</div>
<div class="beans"><img src="img/beans.png" /></div>
<div class="planetarium"><img src="img/Planetarium.png" /></div>
<div class="cloud">
<img src="img/cloudLarge.png" />
<img src="img/cloudMedium.png" />
<img src="img/cloudSmall.png" />
</div>
<div class="star">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="balloon"><img src="img/balloon.png" /></div>
<div class="sky">
<div class="sun"></div>
<div class="moon"></div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
}
.wrap {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
background-color: black;
animation: wrap 20s linear infinite;
}
@keyframes wrap {
0% {background-color: black;}
10% {background-color: cyan;}
25% {background-color: cyan;}
50% {background-color: cyan;}
60% {background-color: black;}
75% {background-color: black;}
100% {background-color: black;}
}
.groundBack {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
}
.groundBack img {
width: 100%;
}
.groundFront {
width: 150%;
position: absolute;
bottom: 0;
left: -400px;
z-index: 999;
}
.groundFront img {
float: left;
}
.groundMid {
width: 90%;
position: absolute;
bottom: 0;
left: 5%;
z-index: 99;
}
.groundMid img {
width: 49%;
float: left;
}
.friend {
position: absolute;
z-index: 100;
bottom: 100px;
left: 400px;
}
.downCenter {
position: absolute;
z-index: 90;
bottom: 200px;
left: 200px;
}
.glockenspiel {
position: absolute;
z-index: 89;
bottom: 250px;
left: 680px;
}
.skyline {
display: flex;
position: absolute;
z-index: 9;
bottom: 300px;
left: 0;
}
.beans {
position: absolute;
z-index: 5;
left: 1000px;
bottom: 300px;
}
.planetarium {
position: absolute;
right: 250px;
bottom: 200px;
z-index: 90;
}
.cloud {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 3;
animation: cloud 20s linear infinite;
}
@keyframes cloud {
0% {opacity: 0}
10% {opacity: 1}
50% {opacity: 1;}
60% {opacity: 0}
100% {opacity: 0}
}
.cloud img:nth-child(1) {
position: absolute;
left: 0;
top: 200px;
animation: cloud1 40s linear infinite alternate -20s;
}
@keyframes cloud1 {
0% {left: 0;}
to {left: 1500px;}
}
.cloud img:nth-child(2) {
position: absolute;
left: 0;
top: 400px;
animation: cloud1 40s linear infinite alternate -10s;
}
.cloud img:nth-child(3) {
position: absolute;
left: 0;
top: 150px;
animation: cloud1 40s linear infinite alternate;
}
.star {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 3;
animation: cloud 20s linear infinite -10s;
}
.star>div {
width: 5px;
height: 5px;
border-radius: 50%;
background-color: yellow;
}
.star>div:nth-child(1) {
position: absolute;
left: 500px;
top: 150px;
animation: star 1s linear alternate infinite -0.3s;
}
.star>div:nth-child(2) {
position: absolute;
left: 500px;
top: 150px;
animation: star 1s linear alternate infinite -0.1s;
}
.star>div:nth-child(3) {
position: absolute;
left: 800px;
top: 200px;
animation: star 1s linear alternate infinite .3s;
}
.star>div:nth-child(4) {
position: absolute;
left: 150px;
top: 220px;
animation: star 1s linear alternate infinite;
}
.star>div:nth-child(5) {
position: absolute;
left: 1100px;
top: 250px;
animation: star 1s linear alternate infinite;
}
@keyframes star {
0% {opacity: 0}
20% {opacity: 1}
80% {opacity: 1}
100% {opacity: 0;}
}
.balloon {
position: absolute;
z-index: 6;
top: 100px;
left: 100px;
animation: balloon 25s linear infinite;
}
@keyframes balloon {
0% {transform: translateX(0) rotateZ(10deg);}
25% {transform: translateX(800px) rotateZ(40deg);}
49% {transform: translateX(1500px) rotateZ(20deg)}
50% {transform: translateX(1500px) rotateZ(-20deg);}
75% {transform: translateX(800px) rotateZ(-50deg);}
99% {transform: translateX(0) rotateZ(-10deg)}
100% {transform: translateX(0) rotateZ(10deg);}
}
.sky {
width: 1000px;
height: 500px;
position: absolute;
left: 500px;
top: 320px;
transform: rotateZ(21deg);
animation: sky 20s linear infinite;
}
.sun {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: white;
box-shadow: -1px -1px 15px 38px white;
position: absolute;
left: 25px;
bottom: 0;
}
.moon {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: gold;
position: absolute;
right: 0;
top: 0;
}
@keyframes sky {
from {transform: rotateZ(21deg);}
to {transform: rotateZ(381deg)}
}