html开发中摩天轮效果实现方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin: 0px;padding: 0px;}
body{
background: url(img/2.jpg) no-repeat;
background-size: 100%;
}
.box1 img{
width: 350px;
height: 180px;
position: absolute;
top: 50px;
bottom:0px;
left: 0px;
right: 0px;
transform: rotate(-30deg);
/*图片的倾斜 rotate角度, deg单位*/
}
.box2{
width: 328px;
height: 529px;
position: absolute;
bottom: 0px;
top: 0px;
left: 0px;
right: 0px;
margin: auto;
}
.box2 img{
margin-top: 50%;
}
.box3{
animation:move 10s linear;
/*animation-direction: reverse;*/
/*反方向转*/
animation-iteration-count: infinite;
/*转圈 1s转一圈的时间 infinite永久性转圈 3转3圈
linear 匀速转圈*/
width: 750px;
height: 750px;
position: absolute;
top: 0px;
left: 40px;
bottom: -25px;
right: 0px;
margin: auto;
border-radius: 5%;
}
@keyframes move{
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
/*转圈 从什么地方转到什么地方*/
.box3 img{
width: 750px;
height: 750px;
}
.box{
animation:move 10s linear;
animation-direction: reverse;
animation-iteration-count: infinite;
width: 150px;
height: 150px;
}
@keyframes move{
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
.box img{
width: 150px;
height: 150px;
}
.box4{
position: relative;
bottom: 470px;
left: -18px;
}
.box5{
position: relative;
bottom: 268px;
left: 312px;
}
.box6{
position: relative;
bottom: 1082px;
left: 309px;
}
.box7{
position: relative;
bottom: 922px;
left: 624px;
}
.box8{
position: relative;
bottom: 1295px;
left: 538px;
}
.box9{
position: relative;
bottom: 991px;
left: 60px;
}
.box10{
position: relative;
bottom: 1141px;
left: 541px;
}
.box11{
position: relative;
bottom: 1748px;
left: 71px;
}
.box3 p img{
border-radius: 50%;
}
</style>
</head>
<body>
<p class = 'box1'>
<img src = 'img/big-title.png'>
</p>
<p class = 'box2'>
<img src = 'img/bracket.png'>
</p>
<p class = 'box3'>
<img src ='img/fsw.png'>
<p class = 'box box4'><img src="img/p1.png"> </p>
<p class = 'box box5'><img src="img/p2.png"> </p>
<p class = 'box box6'><img src="img/p3.png"> </p>
<p class = 'box box7'><img src="img/p4.png"> </p>
<p class = 'box box8'><img src="img/p5.png"> </p>
<p class = 'box box9'><img src="img/p6.png"> </p>
<p class = 'box box10'><img src="img/p7.png"> </p>
<p class = 'box box11'><img src="img/p8.png"> </p>
</p>
</body>
</html>