<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>摩天轮</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
/* 通配选择器，设置所有的内外边距为0 */
}
/* 有一点小区别，background是简写，
除url外，后面还可以设置图片的其他属性，用空格隔。
background-image:url就只能设置图片的路径这一个属性。*/
body{
background-image: url(img/2.jpg);
}
div:nth-child(1){
width: 768px;
height: 768px;
background-image: url(img/fsw.png);
position: absolute;
/* 位置，绝对 */
left: 50%;/* 向左偏移50% */
margin-left: -384px;
animation: zhuanquan 10s linear infinite;
/* animation:动画 zhuanquan：动画名称 20s：动画时长
liner：线变化 infinite：无限 */
}
div:nth-child(2){
width: 247px;
height: 490px;
position: absolute;
/* 绝对位置 */
left: 50%;
/* 左对齐显示50%位置 */
background-image: url(img/bracketsmall.png);
margin-left: -123px;
top: 384px;
/* 层级：默认0层 ,是支架在摩天轮后，需使其层级为-1*/
z-index: -1;
}
div:nth-child(2){
width: 247px;
height: 490px;
position: absolute;
left: 50%;
margin-left: -123px;
top: 384px;
background: url(img/bracketsmall.png);
z-index: -1;
}
div:nth-child(3){
width: 358px;
height:529px;
position: absolute;
left: 50%;
margin-left: -183px;
top: 371px;
background: url(img/bracket.png);
}
div:nth-child(4){
width: 577px;
height: 257px;
position: absolute;
left: 50%;
margin-left: -288px;
top: 262px;
background: url(img/big-title.png);
}
div:nth-child(5){
width: 413px;
height: 139px;
position: absolute;
left: 50%;
margin-left: -206px;
top: 455px;
background: url(img/title.png);
}
div:nth-child(6){
width: 48px;
height: 64px;
position: absolute;
left: 50%;
margin-left: -24px;
top: 542px;
background: url(img/arrow.png);
}
/* 所有小孩 */
li{
width: 130px;
height: 170px;
position: absolute;/* 绝对位置 */
list-style: none;/* 去掉设置ul所得到的 点 */
animation: ren 10s linear infinite;
transform-origin: 50% 40%;/*设置旋转元素的基点位置*/
}
/* 伪类选择器 */
li:nth-child(1){
background-image:url(img/gua.jpg);
left: 55px;
top: 100px;
}
li:nth-child(2){
background: url(img/gua.jpg);
left: 319px; top: 0px;
}
li:nth-child(3){
background: url(img/gua.jpg);
left: 580px; top: 85px;
}
li:nth-child(4){
background: url(img/gua.jpg);
left: 665px; top: 350px;
}
li:nth-child(5){
background:url(img/gua.jpg);
left: 0px; top: 350px;
}
li:nth-child(6){
background: url(img/gua.jpg);
left: 90px; top: 590px;
}
li:nth-child(7){
background: url(img/gua.jpg);
left: 327px; top: 685px;
}
li:nth-child(8){
background: url(img/gua.jpg);
left: 590px; top:540px;
}
/* 动画 */
/* 一帧一帧的变化，角度从0度--360度 */
@keyframes zhuanquan{
from{ transform: rotate(0deg);}
to{ transform: rotate(360deg);}
}
@keyframes ren{
from{ transform: rotate(0deg);}
to{ transform: rotate(-360deg);}
}
</style>
</head>
<body>
<div>
<ul>
<!-- 一个li表示一个人 -->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
浙公网安备 33010602011771号