摩天轮小案例
摩天轮动画
先用内部样式来写
css先初始化
设置浏览器的内外边距,消除了浏览器的影响
div就是划分区域
伪类型器
摩天位置偏,调成中间
子绝父相
这样就转起来了:(后面的图都是旋转的)
ctrl+/:自动生成注释
默认层级是0
找到轮子的div写li,一个li表示一个小人
让小人一直保持头冲上的状态
其他的小人也添加上
其他的步骤一样
效果图:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/* 通配选择器 */
*{
margin:0;
padding:0;
/* 设置所有的内外边距 */
}
body{
background: url(img/2.jpg);
}
div:first-child{
width: 768px;
height:768px;
background: url(img/fsw.png);
/* 绝对定位 */
position: absolute;
left: 50%;
/*左对齐显示50%的位置*/
margin-left: -384px;
/*左边距*/
animation:zhuanquan 10s linear infinite;
/*动画 动画名称 动画时长 线性变换 无限变化*/
}
/* 动画:@keyframs */
@keyframes zhuanquan{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
/*rotate:旋转 transform:变换方式 keyframes:关键帧*/
/*一帧一帧变换::角度是从0-365deg */
div:nth-child(2){
width: 247px;
height: 490px;
background: url(img/bracketsmall.png);
/* 绝对定位 */
position: absolute;
left: 50%;
margin-left: -123px;
top:384px;
/* 层级 */
z-index: -1;
}
/* 设置共通的性质 */
li{
width: 130px;
height:170px;
/* 绝对定位 */
position: absolute;
/* 把无序列表的点去掉 */
list-style-type: none;
animation:ren 10s linear infinite;
/*动画 动画名称 动画时长 线性变换 无限变化*/
/* 设置旋转基点 */
transform-origin: 50% 40%;
}
li:nth-child(1){ background: url(img/girl.png); left: 55px; top: 100px;}
li:nth-child(2){ background: url(img/girls.png); left: 319px; top: 0px;}
li:nth-child(3){ background: url(img/dog.png); left: 580px; top: 85px;}
li:nth-child(4){ background: url(img/boy.png); left: 665px; top: 350px;}
li:nth-child(5){ background: url(img/mimi.png); left: 0px; top: 350px;}
li:nth-child(6){ background: url(img/mudog.png);left: 90px; top: 590px;}
li:nth-child(7){ background: url(img/shamegirl.png); left: 327px; top: 685px;}
li:nth-child(8){ background: url(img/hairboy.png); left: 590px; top:540px;}
/* 动画:@keyframs */
@keyframes ren{
from{transform: rotate(0deg);}
to{transform: rotate(-360deg);}
}
div:nth-child(3){
width: 358px;
height: 529px;
background: url(img/bracket.png);
/* 绝对定位 */
position: absolute;
left: 50%;
margin-left: -179px;
top:384px;
}
div:nth-child(4){
width: 577px;
height: 257px;
background: url(img/big-title.png);
/* 绝对定位 */
position: absolute;
left: 50%;
margin-left: -288px;
top:262px;
}
div:nth-child(5){
width: 413px;
height: 139px;
background: url(img/title.png);
/* 绝对定位 */
position: absolute;
left: 50%;
margin-left: -206px;
top:455px;
}
div:nth-child(6){
width: 48px;
height: 64px;
background: url(img/arrow.png);
/* 绝对定位 */
position: absolute;
left: 50%;
margin-left: -24px;
top:542px;
}
/* 设置共通的性质 */
</style>
</head>
<body>
<div>
<ul>
<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>