本篇主要利用了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属性值的详细解释
在我的另一篇博文中有详细解释，不懂得可以去翻阅：http://t.csdn.cn/fBzSY
