Htmlで書かれた回転する観覧車
30355 ワード
Html 5の観覧車
観覧車は回転する同時に、上の子供も位置を変えることができますが回転しません.原理は観覧車が時計回りに回転し、子供は同時に反時計回りに回転します.
腕が痛くて子供の位置付けは最古の方法で加えられています
CSSスタイル
Html 5初心者の奮闘
観覧車は回転する同時に、上の子供も位置を変えることができますが回転しません.原理は観覧車が時計回りに回転し、子供は同時に反時計回りに回転します.
腕が痛くて子供の位置付けは最古の方法で加えられています
<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);}
}
Html 5初心者の奮闘