玩一个又一个精灵表

Playing one sprite sheet after another

本文关键字：精灵 一个又一个      更新时间：2023-09-26

嘿，我有这个精灵表http://codepen.io/benasl/pen/yabpxo，我想在它结束后改为另一个，在第二个结束后，第一个需要重新开始，等等…我对jquery了解不多，无法实现这种效果。最好的方法是什么?

body {
    background-color: #69e4c3;
}
.kambarys {
    background: url('http://i.imgur.com/pra08AS.jpg');
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    width: 380px;
    height: 372px;
    top: 100px;
    left: 40%;
    animation: convejor 3s steps(76) infinite; 
   
}
@keyframes convejor {
 from { background-position:    0px; }
 to { background-position: -28880px; }
}
<div class="kambarys kambarys-1"></div>

用纯CSS实现这个特性是相当复杂的，因为你想要创建两个动画的循环。
相反，我建议使用Javascript + CSS。所以你可以把它们组合起来对你的动画有更多的控制

看一下这个jsfiddle

$(document).ready(function() {
	setInterval(function(){
  	$('.kambarys').toggleClass('second');
  },3000);
});
body {
    background-color: #69e4c3;
}
.kambarys {
    background-image: url('https://i.imgsafe.org/a37470f198.jpg');
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    width: 380px;
    height: 372px;
    top: 100px;
    left: 40%;
    animation: convejor 3s steps(76) infinite; 
}
.kambarys.second {
   background-image:  url('http://blog.teamtreehouse.com/wp-content/uploads/2014/07/monster.png');
   animation: convejor2 3s steps(10) infinite;
   width: 190px;
}
@keyframes convejor {
 from { background-position: 0px;}
 to { background-position: -28880px;}
}
@keyframes convejor2 {
 from { background-position: 0px;}
 to {background-position: -1900px;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="kambarys"></div>

相关文章：