最近有个客户想要做一个热点图片，但我对动画没有太多的接触，经过这几天的研究和上网查找资料，终于作了出序列帧动画。
图片地址：图片下载
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>序列帧动画练习一</title>
<!--如果图片是单行排列 那他的每帧百分比可以不细分-->
<style type="text/css">
.girl {
background: url('hotspot.png');/*图片的宽高为128 3200px*/
/* 务必设置box的宽度，这样其他不在box中就不会显示*/
background-size: 128px 3200px;/*表示在图片标签中显示的宽高 一般是序列帧图片的宽高或者他的倍数 3200px / 128px == 25 */
-webkit-animation: demo 2s steps(25) infinite; /*steps（25）表示设置25步完成动画*/
width: 128px;
height: 128px;
}
@-webkit-keyframes demo {
0% {
background-position: 0 0;
}
100% {
background-position: 0px -3200px;
} /*设置背景图的位置从0 到-3200px -表示图片向上移*/
}
</style>
</head>
<body bgcolor="gray">
<div class="girl" style="top: 38%;left: 36%;position: absolute;">
</body>
</html>
之后我也在网上找了一些案例，我把文件放在这里，有兴趣的朋友可以看看
序列帧动画下载
第一个是自己写的案例 ， 第二三个是在网上找别人的但是原网我忘了（日后找到了我会将原网地址放上）。
（ps: 这是我的第一篇博文，还不太会操作）17:24:12