逐幀動畫 兩種實現方式 css和js

標籤：技術分享   logs   bsp   position   log   .com   infinite   http   alt   

第一種：

css部分：

<style>
#foxtail{
background: url(../img/foxtail.png) 0 0 no-repeat;
width: 156px;
height: 156px;
}
@keyframes playfox{
0%{background-position: -6864px 0;}
100%{background-position: 0 0;}
}
@-webkit-keyframes playfox{
0%{background-position: -6864px 0;}
100%{background-position: 0 0;}
}
#foxtail{
animation: playfox 3.75s steps(44) infinite;*/
}

</style>

html部分

<div id="foxtail"></div>

 

第二種方法：

css部分：

#foxtail{
background: url(../img/foxtail.png) 0 0 no-repeat;
width: 156px;
height: 156px;
}

js部分：

需引進jquery.spritely.js

 

$("#foxtail").sprite({ fps: 12, no_of_frames: 44 });

 

 

這是圖片

 

 

逐幀動畫 兩種實現方式 css和js