网页类Web游戏开发中常常需要实现连帧的动画效果，但是又不方便通过GIF图片去替代，比如动物的移动就是一种。

下面代码是一个简单的连帧动画的Demo。

 
  
  1. <html> 
  2.     <head> 
  3.         <meta charset="UTF-8"> 
  4.         <title>动画demo</title> 
  5.         <style type="text/css" rel="stylesheet"> 
  6.             body div{  
  7.                     background-p_w_picpath:url(p_w_picpath/donghua.png); background-repeat:no-repeat}  
  8.             .step1{background-position:0px 0px;}  
  9.             .step2{background-position:-111px 0px;}  
  10.             .step3{background-position:-222px 0px;}  
  11.             .step4{background-position:-333px 0px;}  
  12.             .step5{background-position:-444px 0px;}  
  13.             .step6{background-position:-555px 0px;}  
  14.             .step7{background-position:-666px 0px;}  
  15.             .step8{background-position:-777px 0px;}  
  16.         </style> 
  17.         <script type="text/javascript" src="js/jquery.min.js"></script> 
  18.         <script type="text/javascript"> 
  19.             var n=0;  
  20.             //持续设置图片旋转角度，使其显示旋转动画  
  21.             setInterval(function(){   
  22.                 $("#donghua").css({"position":"relative","left":-n+"px","background-position":n+"px 0px"});  
  23.                 n=(n<1000)?n-111:-111;  
  24.             },300);  
  25.         </script> 
  26.     </head> 
  27.     <body style="background-color:black;"> 
  28.         <div class="step1" style="width:111px;height:57px;"></div> 
  29.         <div class="step2" style="width:111px;height:57px;"></div> 
  30.         <div class="step3" style="width:111px;height:57px;"></div> 
  31.         <div class="step4" style="width:111px;height:57px;"></div> 
  32.         <div class="step5" style="width:111px;height:57px;"></div> 
  33.         <div class="step6" style="width:111px;height:57px;"></div> 
  34.         <div class="step7" style="width:111px;height:57px;"></div> 
  35.         <div class="step8" style="width:111px;height:57px;"></div> 
  36.         <hr color="red"> 
  37.         <div id="donghua" style="width:111px;height:57px;"> 
  38.         </div> 
  39.     </body> 
  40. </html>