<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background: url(./images/2.jpg) no-repeat; /*背景*/
z-index: -1;
}
/*旋转轮子和小车是相反的*/
@keyframes zhuan{
from{transform: rotate(0);}
to{transform: rotate(360deg);}
}
@keyframes fanzhuan{
from{transform: rotate(360deg);}
to{transform: rotate(0);}
}
#box{
width: 500px;
height: 500px;
margin: 0 auto 0;/*三个上 、左右、 下 四个上、右、下、左
两个上下、 左右 auto 居中*/
background: url(images/a.png);/*摩天轮*/
background-size: 100% 100%;
animation: zhuan 10s linear infinite;
position: relative;/*相对定位*/
z-index: 2;
}
#box>img{
width: 100px;
height: 150px;
position: absolute;/*绝对定位*/
animation: fanzhuan 10s linear infinite;
transform-origin: 50% 5%;/*或者top center 旋转焦点*/
}
#boxO{
width: 350px;
height: 280px;
top: 250px;
left: 210px;
background: url(images/d.png);/*架子前*/
position: absolute;
z-index: 3;
}
#boxI{
width: 350px;
height: 280px;
top: 250px;
left: 260px;
background: url(images/e.png);/*架子后*/
position: absolute;
z-index: 1;
}
#img1{
left: 200px;
top: 480px;
}
#img3{
left: 20px;
top: 365px;
}
#img4{
left: 200px;
top: 10px;
}
#img5{
left: -20px;
top: 200px;
}
#img6{
left:70px;
top: 50px;
}
#img7{
left:350px;
top: 50px;
}
#img8{
left:390px;
top: 340px;
}
#img9{
left:420px;
top: 200px;
}
#imgd{
left: 200px;
top: 250px;
z-index: -1;
}
</style>
</head>
<body>
<div id="box">
<img src="images/1.png" id="img1">
<img src="images/3.png" id="img3">
<img src="images/4.png" id="img4">
<img src="images/5.png" id="img5">
<img src="images/6.png" id="img6">
<img src="images/7.png" id="img7">
<img src="images/8.png" id="img8">
<img src="images/9.png" id="img9">
</div>
<div id="boxO">
<span>
<img src="images/d.png">
</span>
</div>
<div id="boxI">
<img src="images/e.png">
</div>
</body>
</html>