用Html写的旋转的摩天轮

Html5的摩天轮

摩天轮在转动的同时,上面的小孩也会跟着变动位置但不会旋转,
原理就是摩天轮顺时针旋转,小孩要同时逆时针旋转

胳膊太疼了 小孩的定位都是用最古老的方法加上去的


<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 初学者的奋力挣扎

你可能感兴趣的:(学习)