没有出现效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>慕课七夕主题</title>
<link rel='stylesheet' href='style.css' />
<link rel='stylesheet' href='pageA.css' />
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="Swipe.js"></script>
</head>
<style type="text/css">
.charector {
position: absolute;
left: 6%;
top: 55%;
width: 151px;
height: 291px;
background: url(http://img.mukewang.com/55ade248000198ae10550582.png) -0px -291px no-repeat;
}
.slowWalk {
/*规定 @keyframes 动画的名称。*/
-webkit-animation-name: person-slow;
/*规定动画完成一个周期所花费的秒或毫秒。默认是 0*/
-webkit-animation-duration: 950ms;
/*规定动画被播放的次数。默认是 1。 infinite(循环播放)*/
-webkit-animation-iteration-count: infinite;
/*动画切换的方式是一帧一帧的改变*/
-webkit-animation-timing-function: steps(1, start);
-moz-animation-name: person-slow;
-moz-animation-duration: 950ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: steps(1, start)
/* 普通慢走 */
@-webkit-keyframes person-slow {
0% {
background-position: -0px -291px;
}
25% {
background-position: -602px -0px;
}
50% {
background-position: -302px -291px;
}
75% {
background-position: -151px -291px;
}
100% {
background-position: -0px -291px;
}
}
@-moz-keyframes person-slow {
0% {
background-position: -0px -291px;
}
25% {
background-position: -602px -0px;
}
50% {
background-position: -302px -291px;
}
75% {
background-position: -151px -291px;
}
100% {
background-position: -0px -291px;
}
}
</style>
<body>
<div id='content'>
<ul class='content-wrap'>
<li>
<div class="a_background">
<div class="a_background_top"></div>
<div class="a_background_middle"></div>
<div class="a_background_botton"></div>
</div>
</li>
<li> 页面2 </li>
<li> 页面3 </li>
</ul>
<div id="boy" class="charector"></div>
<div class="button">
<button>点击开始动画</button>
</div>
</div>
<script type="text/javascript">
var swipe = Swipe($("#content"));
// 获取数据
var getValue = function(className) {
var $elem = $('' + className + '');
// 走路的路线坐标
return {
height: $elem.height(),
top: $elem.position().top
};
}
// 路的Y轴
var pathY = function() {
var data = getValue('.a_background_middle');
return data.top + data.height / 2;
}();
var $boy = $("#boy");
var boyHeight = $boy.height();
// 修正小男孩的正确位置
$boy.css({
top: pathY - boyHeight + 25
});
// ==========================
// 增加精灵动画
// ==========================
$('button').click(function(){
// 增加走路的CSS3关键帧规则
$boy.addClass('slowWalk');
});
</script>
</body>
</html>
二次路人冯1回答
随时随地看视频慕课网APP
相关分类
CSS3