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

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

   
   
   
   
    
    
    
    
    
  1. <html> 
    2. 
    
    
    
    
  2.     <head> 
    3. 
    
    
    
    
  3.         <meta charset="UTF-8"> 
    4. 
    
    
    
    
  4.         <title>动画demotitle> 
    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.

 

通过JS控制CSS实现连帧动画_第1张图片