用Html寫的旋轉的摩天輪
阿新 • • 發佈：2018-12-27
Html5的摩天輪
摩天輪在轉動的同時,上面的小孩也會跟著變動位置但不會旋轉,
原理就是摩天輪順時針旋轉,小孩要同時逆時針旋轉
胳膊太疼了 小孩的定位都是用最古老的方法加上去的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>摩天輪</title>
<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
</head 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 初學者的奮力掙扎