<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>城市场景动画</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 1500px;
height: 750px;
background: white;
position: relative;
overflow: hidden;
margin: 0 auto;
animation: background 50s infinite;
}
.photo_1{
position: absolute;
width: 1500px;
bottom: 20px;
z-index: 1;
}
.photo_2_1{
position: absolute;
left:1150px;
bottom: 0px;
z-index: 3;
}
.photo_2_2{
position: absolute;
right:350px;
bottom: 0px;
z-index: 3;
}
.photo_2_3{
position: absolute;
right:1150px;
bottom: 0px;
z-index: 3;
}
.photo_3{
position: absolute;
right:0px;
bottom: 0px;
z-index: 2;
}
.photo_3_2{
position: absolute;
right:600px;
bottom: 0px;
z-index: 2;
}
.photo_4{
position: absolute;
bottom: 200px;
right: 100px;
z-index: 1;
}
.photo_5{
position: absolute;
bottom: 240px;
right: 0px;
z-index: 0;
}
.photo_5_2{
position: absolute;
bottom: 240px;
left: 400px;
z-index: 0;
}
.photo_6{
position: absolute;
left: 250px;
bottom: 150px;
z-index: 2;
}
.photo_7{
position: absolute;
left: 100px;
bottom: 200px;
z-index: 1;
}
.photo_8{
position: absolute;
left: 600px;
bottom: 230px;
z-index: 1;
}
.photo_9{
position: absolute;
left: 800px;
bottom: 300px;
z-index: 0;
}
.photo_10{
position: absolute;
bottom: 500px;
animation: move 50s infinite;
z-index: 1;
}
.photo_11{
position: absolute;
right: 130px;
top: 300px;
z-index: 2;
}
.photo_2_5{
position: absolute;
bottom: 50px;
right: -180px;
z-index: 5;
}
@keyframes move{
0%{
transform: translateX(1420px);
}
13%{
transform: translateX(1050px) rotate(30deg);
}
26%{
transform: translateX(680px) rotate(60deg);
}
39%{
transform: translateX(310px) rotate(30deg);
}
50%{
transform: translateX(-80px);
}
61%{
transform: translateX(310px) rotate(30deg);
}
74%{
transform: translateX(680px) rotate(60deg);
}
87%{
transform: translateX(1050px) rotate(30deg);
}
100%{
transform: translateX(1420px) ;
}
}
@keyframes background{
0%{
background-color: #5A436C;
}
13%{
background-color: #2D2242;
}
26%{
background-color: #6F6366;
}
39%{
background-color: #DDCCC2;
}
50%{
background-color: #B9C6D1
}
61%{
background-color: #DDCCC2;
}
74%{
background-color: #6F6366;
}
87%{
background-color: #2D2242;
}
100%{
background-color: #5A436C;
}
}
</style>
</head>
<body>
<div>
<img src="images\groundBack.png" alt="" class="photo_1">
<img src="images\groundFront.png" alt="" class="photo_2_1">
<img src="images\groundFront.png" alt="" class="photo_2_2">
<img src="images\groundFront.png" alt="" class="photo_2_3">
<img src="images\groundFront.png" alt="" class="photo_2_5">
<img src="images\groundMid.png" alt="" class="photo_3">
<img src="images\groundMid.png" alt="" class="photo_3_2">
<img src="images\Planetarium'png" alt="" class="photo_4">
<img src="images\skyline.png" alt="" class="photo_5">
<img src="images\skyline.png" alt="" class="photo_5_2">
<img src="images\friendshipShell.png" alt="" class="photo_6">
<img src="images\dowEventCenter.png" alt="" class="photo_7">
<img src="images\Glockenspiel.png" alt="" class="photo_8">
<img src="images\beans.png" alt="" class="photo_9">
<img src="images\balloon.png" alt="" class="photo_10">
<img src="images\Planetarium.png" alt="" class="photo_11">
</div>
</body>
</html>
城市场景动画(HTML)
最新推荐文章于 2022-08-04 18:59:29 发布