Jimmery_z 2017-05-05 13:35 采纳率: 80%
浏览 1022

问一个关于css3的动画方面的问题

代码如下:

 <!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>动画</title>
<style>
body{
  margin:0px;
  padding:opx;
}
header{

text-align:center;
}
.act_content{

}
.mod_style{
position:absolute;
top:716px;
left:200px;
width:870px;
heigth:560px;
}
.haha{
position:absolute;
top:0;
left:0;
width:600px;
height:450px;
display:block;
background:url("头像.jpg") 0px 0px no-repeat;
}
.haha1{
background-positoin:0 0;
top:100px;
left:72px;
}
.haha2{
background-positoin:0 -115;
top:39px;
left:242px;
}
.haha3{
background-positoin:0 -215;
top:71px;
left:452px;
}
.shake1{
-webkit-animation-duration:2.5s;
}
.shake2{
-webkit-animation-duration:3.5s;
}
.shake3{
-webkit-animation-duration:1.5s;
}
.box{
width:400px;
margin:100px auto;
animation:rotate 4s linear infinite;
animation-delay:2s;

}

.shake1,.shake2,.shake3{
-webkit-animation-iteration-count:infinite;
-webkit-animation-name:shake;
-webkit-animation-timing-function:ease-in-out;
}

@-webkit-keyframes shake{
0%{
-webkit-transform:rotate(0deg);
-webkit-transform-origin:50% 0;
}
25%{
-webkit-transform:rotate(90deg);
-webkit-transform-origin:50% 0;
}
50%{
-webkit-transform:rotate(180deg);
-webkit-transform-origin:50% 0;
}
75%{
-webkit-transform:rotate(240deg);
-webkit-transform-origin:50% 0;
}
100%{
-webkit-transform:rotate(360deg);
-webkit-transform-origin:50% 0;
}
}

img{
width:100%;
display:block;
}

@-webkit-keyframes rotate{
0%{
transform:rotate(0deg);
}
25%{
transform:rotate(90deg);
}
50%{
transform:rotate(180deg);
}
75%{
transform:rotate(240deg);
}
100%{
transform:rotate(360deg);
}
}
footer{
text-align:right;
font-size:20px;
color:blank;
>
}
</style>
</head>
<body>
<header>世界就这么大!</header>
<div class="act_content">
<div class="mod_style">
<p>loli</p>
<span class="haha haha1 shake1"></span>
<span class=" haha haha2 shake2"></span>
<span class="haha haha3 shake3"></span>
</div>
 </div>    
<div class="box">

     <img src="图片.png">

</div>

</div>
<footer>
&copy 你的世界
</footer>
</body>
</html>

请问下面的代码的意思,请解释一下:
.haha1{
background-positoin:0 0;
top:100px;
left:72px;
}
.haha2{
background-positoin:0 -115;
top:39px;
left:242px;
}
.haha3{
background-positoin:0 -215;
top:71px;
left:452px;
}
这里的background-position和top left请解释一下到底是什么,如果可以的话可以画张图解释一下,谢谢

  • 写回答

1条回答 默认 最新

报告相同问题?

悬赏问题

  • ¥15 python天天向上类似问题,但没有清零
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥50 树莓派安卓APK系统签名