jQuery+CSS3实现人物跳动特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery+CSS3实现人物跳动特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>jQuery+CSS3实现人物跳动特效</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>

<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>
</html>

CSS代码(index.css):

/* ============================================================ 样式重置 ============================================================ */
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;}

附件:下载该文件资源,减少时间成本(增值服务)