本篇主要利用了animation实现了三个动画效果：奔跑的小孩，行走的人和拳皇动画；
实现步骤：
1、找寻需要用到的三张图：
奔跑的小孩
行走的人
拳皇
2、右单击图片查看属性，如图：
其他两张方法类似；
获取这里的宽度：474px 高度：70px
3、编写代码，实现动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 59px;
height: 70px;
margin: 0 auto;
background-image: url(./img/奔跑小人.jpg);
/* background-position: 0; */
animation: BoyTest 0.8s steps(8) infinite alternate;
}
/* 创建关键帧 */
@keyframes BoyTest {
from{background-position: 0 0;}
to{background-position: -474px 0;}
}
.box2{
width: 296px;
height: 340px;
margin: 0 auto;
background-image: url(./img/1.jpg);
/* background-position: 0; */
animation: ManTest 0.8s steps(4) infinite alternate;
}
/* 创建关键帧 */
@keyframes ManTest {
from{background-position: 0 0;}
to{background-position: -1183px 0;}
}
.box3{
width: 256px;
height: 424px;
margin: 0 auto;
background-image: url(./img/2.jpg);
/* background-position: 0; */
animation: GameTest 0.8s steps(4) infinite alternate;
}
/* 创建关键帧 */
@keyframes GameTest {
from{background-position: 0 0;}
to{background-position: -1024px 0;}
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
4、效果展示
5、animation属性值的详细解释
标签：动画,0.8,image,animation,background,position,拳皇,CSS From： https://blog.51cto.com/u_15740516/5747867