版权声明：本文为博主原创,未经允许不得转载 https://blog.csdn.net/qq_37282601/article/details/85005372
Html5的摩天轮
摩天轮在转动的同时,上面的小孩也会跟着变动位置但不会旋转,
原理就是摩天轮顺时针旋转,小孩要同时逆时针旋转
胳膊太疼了 小孩的定位都是用最古老的方法加上去的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>摩天轮</title>
<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
</head>
<body id="main">
<div id="quan">
<div id="xuan">
<img id="img1" src="img/fsw.png"/>
<div id="xiao">
<ul id="xiaoul">
<li class="tt1" id="tt11"><img src="img/boy.png" alt="" /></li>
<li class="tt1" id="tt12"><img src="img/dog.png" alt="" /></li>
<li class="tt1" id="tt13"><img src="img/girl.png" alt="" /></li>
<li class="tt1" id="tt14"><img src="img/shamegirl.png"/></li>
<li class="tt1" id="tt15"><img src="img/girls.png"/></li>
<li class="tt1" id="tt16"><img src="img/hairboy.png"/></li>
<li class="tt1" id="tt17"><img src="img/mimi.png"/></li>
<li class="tt1" id="tt18"><img src="img/mudog.png"/></li>
</ul>
</div>
</div>
<img id="img2" src="img/bracket.png"/>
<div id="wai">
<img id="wai1" src="img/big-title.png"/>
<img id="wai2" src="img/title.png"/>
<img id="wai3" src="img/arrow.png"/>
</div>
</body>
</html>
CSS样式
#main{
background: url(img/2.jpg);
background-size: 100% auto;
height: 100%;
width: 100%;
}
#quan{
width: 400px;
height: 400px;
background: url(img/bracketsmall.png);
background-size: 100% auto;
margin: 300px auto;
}
#img1{
width: 100%;
}
#img2{
height: 100%;
position: relative;
top: -400px;
left: 70px;
}
#xuan{
position: relative;
top: -200px;
left: 10px;
animation: quanzhuan 5s linear infinite;
}
#xiao{
height: 400px;
width: 400px;
position: absolute;
top: 0px;
}
#xiaoul{
display: flex;
}
.tt1>img{
height: 100px;
position: relative;
top: 50px;
}
.tt1{
left: 230px;
top: 20px;
animation: xiaozhuan 5s linear infinite;
}
#tt11{position: absolute;left: 0px;}
#tt12{position: absolute;left: 0px;top: 180px;}
#tt13{position: absolute;left: 100px;top: -40px;}
#tt14{position: absolute;left: 100px;top: 300px;}
#tt15{position: absolute;left: 210px;top: -40px;}
#tt16{position: absolute;left: 210px;top: 300px;}
#tt17{position: absolute;left: 320px;}
#tt18{position: absolute;left: 320px;top: 180px;}
#wai{
position: relative;
top: -900px;
}
#wai1{
width: 65%;
position: relative;
top: 30px;
left: 80px;
}
#wai2{
width: 50%;
position: relative;
left: 120px;
}
#wai3{
width: 30px;
position: relative;
left: 30px;
}
@keyframes quanzhuan{
0{transform: rotate(0);}
100%{transform: rotate(360deg);}
}
@keyframes xiaozhuan{
0{transform: rotate(0);}
100%{transform: rotate(-360deg);}
}
一个Html5 初学者的奋力挣扎