網頁類Web遊戲開發中常常需要實現連幀的動畫效果，但是又不方便通過GIF圖片去替代，比如動物的移動就是一種。
下面代碼是一個簡單的連幀動畫的Demo。
<html>
<head>
<meta charset="UTF-8">
<title>動畫demo</title>
<style type="text/css" rel="stylesheet">
body div{
background-image:url(image/donghua.png); background-repeat:no-repeat}
.step1{background-position:0px 0px;}
.step2{background-position:-111px 0px;}
.step3{background-position:-222px 0px;}
.step4{background-position:-333px 0px;}
.step5{background-position:-444px 0px;}
.step6{background-position:-555px 0px;}
.step7{background-position:-666px 0px;}
.step8{background-position:-777px 0px;}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var n=0;
//持續設置圖片旋轉角度，使其顯示旋轉動畫
setInterval(function(){
$("#donghua").css({"position":"relative","left":-n+"px","background-position":n+"px 0px"});
n=(n>-777)?n-111:-111;
},300);
</script>
</head>
<body style="background-color:black;">
<div class="step1" style="width:111px;height:57px;"></div>
<div class="step2" style="width:111px;height:57px;"></div>
<div class="step3" style="width:111px;height:57px;"></div>
<div class="step4" style="width:111px;height:57px;"></div>
<div class="step5" style="width:111px;height:57px;"></div>
<div class="step6" style="width:111px;height:57px;"></div>
<div class="step7" style="width:111px;height:57px;"></div>
<div class="step8" style="width:111px;height:57px;"></div>
<hr color="red">
<div id="donghua" style="width:111px;height:57px;">
</div>
</body>
</html>
最終效果如圖所示：
