# 精灵图转gif
原因：gif不好实现暂停，且gif在火狐浏览器项目中出现模糊影响体验。
原理：css动画帧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>demo</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="charector-wrap " id="js_wrap">
<div class="charector"></div>
</div>
<a class="run-xfast" href="#none">最快</a>
<a class="run-fast" href="#none">快</a>
<a class="run-normal" href="#none">正常</a>
<a class="run-slow" href="#none">慢</a>
<button class="btn-paused">暂停</button>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").on("click",function(e){
$("#js_wrap").find(".charector-wrap").removeClass("paused");
$("#js_wrap").attr("class","charector-wrap " + $(e.target).attr("class").split("-")[1])
})
$(".btn-paused").click(function(){
$("#js_wrap").addClass("paused");
})
})
</script>
/* ============================================================
样式重置
============================================================ */
body,
p,
ul,
ol,
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
input,
select,
textarea,
button,
th,
td,
blockquote,
address,
pre {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
input,
textarea,
select,
button,
label {
font-size: 100%;
vertical-align: middle;
}
ul,
dl,
ol {
list-style: none;
}
img,
fieldset {
border: none;
}
img {
display: inline-block;
overflow: hidden;
vertical-align: top;
}
em,
address {
font-style: normal;
}
sup,
sub {
vertical-align: baseline;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
q:before {
content: "";
}
q:after {
content: "";
}
button {
cursor: pointer;
}
textarea {
word-wrap: break-word;
resize: none;
}
/* ============================================================
页面
============================================================ */
.charector-wrap {
position: relative;
width: 180px;
height: 300px;
left: 50%;
margin-left: -90px;
}
[class^=run-],
.btn-paused {
display: block;
color: #000;
text-align: center;
padding: 5px;
margin-bottom: 5px;
margin-left: 50px;
text-decoration: none;
width: 50px;
border: 1px solid #ccc;
float: left;
}
.btn-paused {
color: red;
}
.charector {
position: absolute;
width: 180px;
height: 300px;
background: url(../img/charector.png) 0 0 no-repeat;
-webkit-animation-iteration-count: infinite;
/* 动画无限播放 */
-webkit-animation-timing-function: step-start;
/* 马上跳到动画每一结束桢的状态 */
}
/* 跑步动画名称 */
@-webkit-keyframes person-xfast {
/* 超快 */
0% {
background-position: 0 0;
}
14.3% {
background-position: -180px 0;
}
28.6% {
background-position: -360px 0;
}
42.9% {
background-position: -540px 0;
}
57.2% {
background-position: -720px 0;
}
71.5% {
background-position: -900px 0;
}
85.8% {
background-position: -1080px 0;
}
100% {
background-position: 0 0;
}
}
@-webkit-keyframes person-fast {
/* 快 */
0% {
background-position: 0 0;
}
14.3% {
background-position: -180px 0;
}
28.6% {
background-position: -360px 0;
}
42.9% {
background-position: -540px 0;
}
57.2% {
background-position: -720px 0;
}
71.5% {
background-position: -900px 0;
}
85.8% {
background-position: -1080px 0;
}
100% {
background-position: 0 0;
}
}
@-webkit-keyframes person-normal {
/* 正常 */
0% {
background-position: 0 0;
}
14.3% {
background-position: -180px 0;
}
28.6% {
background-position: -360px 0;
}
42.9% {
background-position: -540px 0;
}
57.2% {
background-position: -720px 0;
}
71.5% {
background-position: -900px 0;
}
85.8% {
background-position: -1080px 0;
}
100% {
background-position: 0 0;
}
}
@-webkit-keyframes person-slow {
/* 慢 */
0% {
background-position: 0 0;
}
14.3% {
background-position: -180px 0;
}
28.6% {
background-position: -360px 0;
}
42.9% {
background-position: -540px 0;
}
57.2% {
background-position: -720px 0;
}
71.5% {
background-position: -900px 0;
}
85.8% {
background-position: -1080px 0;
}
100% {
background-position: 0 0;
}
}
/* 跑步动作频率控制 */
.xfast .charector {
/* 超快 */
-webkit-animation-name: person-xfast;
-webkit-animation-duration: 500ms;
}
.fast .charector {
/* 快 */
-webkit-animation-name: person-fast;
-webkit-animation-duration: 650ms;
}
.normal .charector {
/* 正常 */
-webkit-animation-name: person-normal;
-webkit-animation-duration: 800ms;
}
.slow .charector {
/* 慢 */
-webkit-animation-name: person-slow;
-webkit-animation-duration: 950ms;
}
/* 暂停动画 */
.paused .charector {
-webkit-animation-play-state: paused;
}