Code:
<!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>
The result is this:
it looks quite interesting, the address of this page-" click me
before the server is down, you can click
on this picture, everyone searched a lot:
