代码如下:
<!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>
© 你的世界
</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请解释一下到底是什么,如果可以的话可以画张图解释一下,谢谢