代码：
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>少女动画</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.girl{
width: 120px;
height: 150px;
background-image: url("img/sailormars.png");
margin: 0 auto;
animation: girl-set 1s steps(8) infinite;/*steps(8) 里面的数字看这一行有几个图*/
}
/*创建关键帧 后面的名字自定义 和上面的girl绑定*/
@keyframes girl-set {
from{
background-position: 0 0;
}
to{
background-position: -960px 0;
}
}
/*这个也一样*/
.girl2{
width: 120px;
height: 150px;
background-image: url("img/sailormars.png");
margin: 0 auto;
animation: girl2-set 1s steps(6) infinite;
}
@keyframes girl2-set {
from{
background-position: 0 -150px;
}
to{
background-position: -720px -150px;
}
}
.girl3{
width: 120px;
height: 150px;
background-image: url("img/sailormars.png");
margin: 0 auto;
animation: girl3-set 1s steps(10) infinite;
}
@keyframes girl3-set {
from{
background-position: 0 -300px;
}
to{
background-position: -1200px -300px;
}
}
.girl4{
width: 120px;
height: 150px;
background-image: url("img/sailormars.png");
margin: 0 auto;
animation: girl4-set 1s steps(9) infinite;
}
@keyframes girl4-set {
from{
background-position: 0 -450px;
}
to{
background-position: -1080px -450px;
}
}
</style>
<body>
<div class="girl"></div>
<div class="girl2"></div>
<div class="girl3"></div>
<div class="girl4"></div>
</body>
</html>
结果是这个：
看起来还挺有趣的，这个页面的地址 -》 点我
服务器没挂之前 可以点的
关于这个图片大家一搜一大堆：
