Home思洋影视事业部网站建设知识库
0 Comments

HTML 5 实现小车动画效果(4)

发布于：2013-07-09  |   作者：广州网站建设  |   已聚集：人围观

JQuery与CSS3合体

这是一个效果与兼容性俱佳的方式（特别对于IE9暂不支持CSS3而言）

HTML代码（可以看到与CSS3中的HTML代码并无不同）：
广州网站建设,网站建设,广州网页设计,广州网站设计



    
	
  1. 
		<html> 
    2. 
	
  2. 
		   <head> 
    3. 
	
  3. 
		      <meta charset="UTF-8" /> 
    4. 
	
  4. 
		      <title>Animations in HTML5 using CSS3 animations</title> 
    5. 
	
  5. 
		       </head> 
    6. 
	
  6. 
		   <body> 
    7. 
	
  7. 
		      < id="container"> 
    8. 
	
  8. 
		      < id="car"> 
    9. 
	
  9. 
		         < id="chassis"></> 
    10. 
	
  10. 
		         <div id="backtire" class="tire"> 
    11. 
	
  11. 
		         <div class="hr"></div> 
    12. 
	
  12. 
		         <div class="vr"></div> 
    13. 
	
  13. 
		         </div> 
    14. 
	
  14. 
		         <div id="fronttire" class="tire"> 
    15. 
	
  15. 
		         <div class="hr"></div> 
    16. 
	
  16. 
		         <div class="vr"></div> 
    17. 
	
  17. 
		         </div>   
    18. 
	
  18. 
		      </div> 
    19. 
	
  19. 
		      <div id="grass"></div> 
    20. 
	
  20. 
		      </div> 
    21. 
	
  21. 
		      <footer></footer> 
    22. 
	
  22. 
		   </body> 
    23. 
	
  23. 
		</html>  
    24. 




	CSS:




    
	
  1. 
		<style>  
    2. 
	
  2. 
		         body  
    3. 
	
  3. 
		     {  
    4. 
	
  4. 
		        padding:0;  
    5. 
	
  5. 
		        margin:0;  
    6. 
	
  6. 
		         }  
    7. 
	
  7. 
		 
    8. 
	
  8. 
		      #container  
    9. 
	
  9. 
		     {  
    10. 
	
  10. 
		        position:relative;  
    11. 
	
  11. 
		        width:100%;  
    12. 
	
  12. 
		        height:600px;  
    13. 
	
  13. 
		        overflow:hidden;        /*这个很重要*/ 
    14. 
	
  14. 
		     }  
    15. 
	
  15. 
		 
    16. 
	
  16. 
		     #car 
    17. 
	
  17. 
		     {  
    18. 
	
  18. 
		        position:absolute;      /*汽车在容器中采用绝对定位*/ 
    19. 
	
  19. 
		        width:400px;  
    20. 
	
  20. 
		        height:210px;       /*汽车的总高度，包括轮胎和底盘*/ 
    21. 
	
  21. 
		        z-index:1;          /*让汽车在背景的上方*/ 
    22. 
	
  22. 
		        top:300px;          /*距顶端的距离(y轴)*/ 
    23. 
	
  23. 
		        left:50px;          /*距左侧的距离(x轴)*/ 
    24. 
	
  24. 
		     }  
    25. 
	
  25. 
		 
    26. 
	
  26. 
		      /*车身*/ 
    27. 
	
  27. 
		     #chassis  
    28. 
	
  28. 
		     {  
    29. 
	
  29. 
		        position:absolute;  
    30. 
	
  30. 
		        width:400px;  
    31. 
	
  31. 
		        height:130px;  
    32. 
	
  32. 
		        background:#FF9900;  
    33. 
	
  33. 
		        border: 2px solid #FF6600;  
    34. 
	
  34. 
		     }  
    35. 
	
  35. 
		      
    36. 
	
  36. 
		     /*轮胎*/ 
    37. 
	
  37. 
		     .tire  
    38. 
	
  38. 
		     {  
    39. 
	
  39. 
		        z-index:1;          /*同上，轮胎也应置于背景的上方*/ 
    40. 
	
  40. 
		        position:absolute;  
    41. 
	
  41. 
		        bottom:0;  
    42. 
	
  42. 
		        border-radius:60px;     /*圆半径*/ 
    43. 
	
  43. 
		        height:120px;       /* 2*radius=height */ 
    44. 
	
  44. 
		        width:120px;        /* 2*radius=width */ 
    45. 
	
  45. 
		        background:#0099FF;     /*填充色*/ 
    46. 
	
  46. 
		        border:1px solid #3300FF;  
    47. 
	
  47. 
		        -o-transform:rotate(0deg);  /*旋转(单位：度)*/ 
    48. 
	
  48. 
		        -ms-transform:rotate(0deg);  
    49. 
	
  49. 
		        -webkit-transform:rotate(0deg);  
    50. 
	
  50. 
		        -moz-transform:rotate(0deg);  
    51. 
	
  51. 
		     }  
    52. 
	
  52. 
		 
    53. 
	
  53. 
		     #fronttire  
    54. 
	
  54. 
		     {  
    55. 
	
  55. 
		        right:20px;     /*设置右边的轮胎距离边缘的距离为20*/ 
    56. 
	
  56. 
		     }  
    57. 
	
  57. 
		 
    58. 
	
  58. 
		     #backtire  
    59. 
	
  59. 
		     {  
    60. 
	
  60. 
		        left:20px;      /*设置左边的轮胎距离边缘的距离为20*/ 
    61. 
	
  61. 
		     }  
    62. 
	
  62. 
		 
    63. 
	
  63. 
		     #grass 
    64. 
	
  64. 
		     {  
    65. 
	
  65. 
		        position:absolute;  /*背景绝对定位在容器中*/ 
    66. 
	
  66. 
		        width:100%;  
    67. 
	
  67. 
		        height:130px;  
    68. 
	
  68. 
		        bottom:0;  
    69. 
	
  69. 
		        /*让背景色线性渐变,bottom,表示渐变的起始处，第一个颜色值是渐变的起始值，第二个颜色值是终止值 */ 
    70. 
	
  70. 
		        background:linear-grdaient(bottom,#33CC00,#66FF22);  
    71. 
	
  71. 
		        background:-webkit-linear-gradient(bottom,#33CC00,#66FF22);  
    72. 
	
  72. 
		        background:-moz-linear-gradient(bottom,#33CC00,#66FF22);  
    73. 
	
  73. 
		        background:-ms-linear-gradient(bottom,#33CC00,#66FF22);   
    74. 
	
  74. 
		     }  
    75. 
	
  75. 
		 
    76. 
	
  76. 
		     .hr,.vr  
    77. 
	
  77. 
		     {  
    78. 
	
  78. 
		        position:absolute;  
    79. 
	
  79. 
		        background:#3300FF;  
    80. 
	
  80. 
		     }  
    81. 
	
  81. 
		 
    82. 
	
  82. 
		     .hr  
    83. 
	
  83. 
		     {  
    84. 
	
  84. 
		        height:1px;  
    85. 
	
  85. 
		        width:100%;     /*水平线*/ 
    86. 
	
  86. 
		        left:0;  
    87. 
	
  87. 
		        top:60px;  
    88. 
	
  88. 
		     }  
    89. 
	
  89. 
		 
    90. 
	
  90. 
		     .vr  
    91. 
	
  91. 
		     {  
    92. 
	
  92. 
		        width:1px;  
    93. 
	
  93. 
		        height:100%;    /*垂直线*/ 
    94. 
	
  94. 
		        left:60px;  
    95. 
	
  95. 
		        top:0;  
    96. 
	
  96. 
		     }  
    97. 
	
  97. 
		 
    98. 
	
  98. 
		      </style> 
    99. 




	JS代码：



	首先引入在线API：

	广州网站建设,网站建设,广州网页设计,广州网站设计




    
	
  1. 
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    2. 




	实现动画代码（相当简洁）：




    
	
  1. 
		<script>  
    2. 
	
  2. 
		         $(function(){  
    3. 
	
  3. 
		         var rot=0;  
    4. 
	
  4. 
		         var prefix=$('.tire').css('-o-transform')?'-o-transform':($('.tire').css('-ms-transform')?'-ms-transform':($('.tire').css('-moz-transform')?'-moz-transform':($('.tire').css('-webkit-transform')?'-webkit-transform':'transform')));  
    5. 
	
  5. 
		 
    6. 
	
  6. 
		         var origin={       /*设置我们的起始点*/ 
    7. 
	
  7. 
		         left:-400  
    8. 
	
  8. 
		         };  
    9. 
	
  9. 
		 
    10. 
	
  10. 
		         var animation={        /*该动画由jQuery执行*/ 
    11. 
	
  11. 
		         left:1600      /*设置我们将移动到的最终位置*/ 
    12. 
	
  12. 
		     };  
    13. 
	
  13. 
		 
    14. 
	
  14. 
		         var rotate=function(){ /*该方法将被旋转的轮子调用*/ 
    15. 
	
  15. 
		         rot+=2;  
    16. 
	
  16. 
		         $('.tire').css(prefix,'rotate('+rot+'deg)');  
    17. 
	
  17. 
		     };  
    18. 
	
  18. 
		 
    19. 
	
  19. 
		         var options={      /*将要被jQuery使用的参数*/ 
    20. 
	
  20. 
		         easing:'linear',   /*指定速度，此处只是线性，即为匀速*/ 
    21. 
	
  21. 
		         duration:10000,    /*指定动画持续时间*/ 
    22. 
	
  22. 
		         complete:function(){  
    23. 
	
  23. 
		            $('#car').css(origin).animate(animation,options);  
    24. 
	
  24. 
		         },  
    25. 
	
  25. 
		         step:rotate  
    26. 
	
  26. 
		     };  
    27. 
	
  27. 
		 
    28. 
	
  28. 
		         options.complete();  
    29. 
	
  29. 
		      });  
    30. 
	
  30. 
		      </script> 
    31. 




	简单讲解：prefix首先识别出当前是哪个定义被采用了（-o?-moz?-webkit?-ms?），然后定义了动画的起点位置和终点位置。接着，定义了设置旋转角度的函数（该函数将在在动画的每一步(step)中执行）。然后，定义了一个动画，该定义方式导致了无限自循环调用！



	本文，通过一个简单的动画实例，演示了HTML5下，实现动画的几种常见方式。


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机