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

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

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