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

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

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

该是CSS3出场了

你将看到我们未通过一句JS代码就完全实现了和上面一样的动画效果：
广州网站建设,网站建设,广州网页设计,广州网站设计

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. 
		         < id="backtire" class="tire"> 
    11. 
	
  11. 
		         < class="hr"></> 
    12. 
	
  12. 
		         < class="vr"></> 
    13. 
	
  13. 
		         </> 
    14. 
	
  14. 
		         < id="fronttire" class="tire"> 
    15. 
	
  15. 
		         < class="hr"></> 
    16. 
	
  16. 
		         < class="vr"></> 
    17. 
	
  17. 
		         </>   
    18. 
	
  18. 
		      </> 
    19. 
	
  19. 
		      < id="grass"></> 
    20. 
	
  20. 
		      </> 
    21. 
	
  21. 
		      <footer></footer> 
    22. 
	
  22. 
		   </body> 
    23. 
	
  23. 
		</html> 
    24. 




	CSS代码：




    
	
  1. 
		body  
    2. 
	
  2. 
		 {  
    3. 
	
  3. 
		    padding:0;  
    4. 
	
  4. 
		    margin:0;  
    5. 
	
  5. 
		 } 
    6. 




	定义车身与轮胎转到的动画（你会看到基本每一个动画都有四个版本的定义：原生版本/webkit【Chrome|Safari】/ms【为了向后兼容IE10】/moz【FireFox】）




    
	
  1. 
		/*定义动画：从-400px的位置移动到1600px的位置 */ 
    2. 
	
  2. 
		 @keyframes carAnimation  
    3. 
	
  3. 
		 {  
    4. 
	
  4. 
		    0% { left:-400px; }     /* 指定初始位置，0%等同于from*/ 
    5. 
	
  5. 
		    100% { left:1600px; }   /* 指定最终位置,100%等同于to*/ 
    6. 
	
  6. 
		 }  
    7. 
	
  7. 
		 
    8. 
	
  8. 
		 /* Safari and Chrome */ 
    9. 
	
  9. 
		 @-webkit-keyframes carAnimation  
    10. 
	
  10. 
		 {  
    11. 
	
  11. 
		    0% {left:-400px; }  
    12. 
	
  12. 
		    100% {left:1600px; }  
    13. 
	
  13. 
		 }  
    14. 
	
  14. 
		 
    15. 
	
  15. 
		 /* Firefox */ 
    16. 
	
  16. 
		 @-moz-keyframes carAnimation  
    17. 
	
  17. 
		 {  
    18. 
	
  18. 
		    0% {left:-400; }  
    19. 
	
  19. 
		    100% {left:1600px; }   
    20. 
	
  20. 
		 }  
    21. 
	
  21. 
		 
    22. 
	
  22. 
		 /*IE暂不支持,此处定义是为了向后兼容IE10*/ 
    23. 
	
  23. 
		 @-ms-keyframes carAnimation  
    24. 
	
  24. 
		 {  
    25. 
	
  25. 
		    0% {left:-400px; }  
    26. 
	
  26. 
		    100%{left:1600px; }  
    27. 
	
  27. 
		 } 
    28. 





    
	
  1. 
		@keyframes tyreAnimation  
    2. 
	
  2. 
		 {  
    3. 
	
  3. 
		    0% {transform: rotate(0); }  
    4. 
	
  4. 
		    100% {transform: rotate(1800deg); }  
    5. 
	
  5. 
		 }  
    6. 
	
  6. 
		 
    7. 
	
  7. 
		 @-webkit-keyframes tyreAnimation  
    8. 
	
  8. 
		 {  
    9. 
	
  9. 
		    0% { -webkit-transform: rotate(0); }  
    10. 
	
  10. 
		    100% { -webkit-transform: rotate(1800deg); }  
    11. 
	
  11. 
		 }  
    12. 
	
  12. 
		 
    13. 
	
  13. 
		 @-moz-keyframes tyreAnimation  
    14. 
	
  14. 
		 {  
    15. 
	
  15. 
		    0% { -moz-transform: rotate(0); }  
    16. 
	
  16. 
		    100% { -moz-transform: rotate(1800deg); }  
    17. 
	
  17. 
		 }  
    18. 
	
  18. 
		 
    19. 
	
  19. 
		 @-ms-keyframes tyreAnimation  
    20. 
	
  20. 
		 {  
    21. 
	
  21. 
		    0% { -ms-transform: rotate(0); }  
    22. 
	
  22. 
		    100% { -ms-transform: rotate(1800deg); }  
    23. 
	
  23. 
		 } 
    24. 





    
	
  1. 
		#container  
    2. 
	
  2. 
		 {  
    3. 
	
  3. 
		    position:relative;  
    4. 
	
  4. 
		    width:100%;  
    5. 
	
  5. 
		    height:600px;  
    6. 
	
  6. 
		    overflow:hidden;        /*这个很重要*/ 
    7. 
	
  7. 
		 }  
    8. 
	
  8. 
		 
    9. 
	
  9. 
		 #car 
    10. 
	
  10. 
		 {  
    11. 
	
  11. 
		    position:absolute;      /*汽车在容器中采用绝对定位*/ 
    12. 
	
  12. 
		    width:400px;  
    13. 
	
  13. 
		    height:210px;       /*汽车的总高度，包括轮胎和底盘*/ 
    14. 
	
  14. 
		    z-index:1;          /*让汽车在背景的上方*/ 
    15. 
	
  15. 
		    top:300px;          /*距顶端的距离(y轴)*/ 
    16. 
	
  16. 
		    left:50px;          /*距左侧的距离(x轴)*/ 
    17. 
	
  17. 
		 
    18. 
	
  18. 
		    /*以下内容赋予该元素预先定义的动画及相关属性*/ 
    19. 
	
  19. 
		    -webkit-animation-name:carAnimation;        /*名称*/ 
    20. 
	
  20. 
		    -webkit-animation-duration:10s;         /*持续时间*/ 
    21. 
	
  21. 
		    -webkit-animation-iteration-count:infinite;     /*迭代次数-无限次*/ 
    22. 
	
  22. 
		    -webkit-animation-timing-function:linear;       /*播放动画时从头到尾都以相同的速度*/ 
    23. 
	
  23. 
		 
    24. 
	
  24. 
		    -moz-animation-name:carAnimation;       /*名称*/ 
    25. 
	
  25. 
		    -moz-animation-duration:10s;            /*持续时间*/ 
    26. 
	
  26. 
		    -moz-animation-iteration-count:infinite;        /*迭代次数-无限次*/ 
    27. 
	
  27. 
		    -moz-animation-timing-function:linear;      /*播放动画时从头到尾都以相同的速度*/ 
    28. 
	
  28. 
		 
    29. 
	
  29. 
		    -ms-animation-name:carAnimation;        /*名称*/ 
    30. 
	
  30. 
		    -ms-animation-duration:10s;         /*持续时间*/ 
    31. 
	
  31. 
		    -ms-animation-iteration-count:infinite;     /*迭代次数-无限次*/ 
    32. 
	
  32. 
		    -ms-animation-timing-function:linear;       /*播放动画时从头到尾都以相同的速度*/ 
    33. 
	
  33. 
		 
    34. 
	
  34. 
		    animation-name:carAnimation;        /*名称*/ 
    35. 
	
  35. 
		    animation-duration:10s;         /*持续时间*/ 
    36. 
	
  36. 
		    animation-iteration-count:infinite;     /*迭代次数-无限次*/ 
    37. 
	
  37. 
		    animation-timing-function:linear;       /*播放动画时从头到尾都以相同的速度*/ 
    38. 
	
  38. 
		 }  
    39. 
	
  39. 
		 
    40. 
	
  40. 
		 /*车身*/ 
    41. 
	
  41. 
		 #chassis  
    42. 
	
  42. 
		 {  
    43. 
	
  43. 
		    position:absolute;  
    44. 
	
  44. 
		    width:400px;  
    45. 
	
  45. 
		    height:130px;  
    46. 
	
  46. 
		    background:#FF9900;  
    47. 
	
  47. 
		    border: 2px solid #FF6600;  
    48. 
	
  48. 
		 }  
    49. 
	
  49. 
		 
    50. 
	
  50. 
		 /*轮胎*/ 
    51. 
	
  51. 
		 .tire  
    52. 
	
  52. 
		 {  
    53. 
	
  53. 
		    z-index:1;          /*同上，轮胎也应置于背景的上方*/ 
    54. 
	
  54. 
		    position:absolute;  
    55. 
	
  55. 
		    bottom:0;  
    56. 
	
  56. 
		    border-radius:60px;     /*圆半径*/ 
    57. 
	
  57. 
		    height:120px;       /* 2*radius=height */ 
    58. 
	
  58. 
		    width:120px;        /* 2*radius=width */ 
    59. 
	
  59. 
		    background:#0099FF;     /*填充色*/ 
    60. 
	
  60. 
		    border:1px solid #3300FF;  
    61. 
	
  61. 
		 
    62. 
	
  62. 
		    -webkit-animation-name:tyreAnimation;  
    63. 
	
  63. 
		    -webkit-animation-duration:10s;  
    64. 
	
  64. 
		    -webkit-animation-iteration-count:infinite;  
    65. 
	
  65. 
		    -webkit-animation-timing-function:linear;  
    66. 
	
  66. 
		 
    67. 
	
  67. 
		    -moz-animation-name:tyreAnimation;  
    68. 
	
  68. 
		    -moz-animation-duration:10s;  
    69. 
	
  69. 
		    -moz-animation-iteration-count:infinite;  
    70. 
	
  70. 
		    -moz-animation-timing-function:linear;  
    71. 
	
  71. 
		 
    72. 
	
  72. 
		    -ms-animation-name:tyreAnimation;  
    73. 
	
  73. 
		    -ms-animation-duration:10s;  
    74. 
	
  74. 
		    -ms-animation-iteration-count:infinite;  
    75. 
	
  75. 
		    -ms-animation-timing-function:linear;         
    76. 
	
  76. 
		 
    77. 
	
  77. 
		    animation-name:tyreAnimation;  
    78. 
	
  78. 
		    animation-duration:10s;  
    79. 
	
  79. 
		    animation-iteration-count:infinite;  
    80. 
	
  80. 
		    animation-timing-function:linear;  
    81. 
	
  81. 
		 }  
    82. 
	
  82. 
		 
    83. 
	
  83. 
		 #fronttire  
    84. 
	
  84. 
		 {  
    85. 
	
  85. 
		    right:20px;     /*设置右边的轮胎距离边缘的距离为20*/ 
    86. 
	
  86. 
		 }  
    87. 
	
  87. 
		 
    88. 
	
  88. 
		 #backtire  
    89. 
	
  89. 
		 {  
    90. 
	
  90. 
		    left:20px;      /*设置左边的轮胎距离边缘的距离为20*/ 
    91. 
	
  91. 
		 }  
    92. 
	
  92. 
		 
    93. 
	
  93. 
		 #grass 
    94. 
	
  94. 
		 {  
    95. 
	
  95. 
		    position:absolute;  /*背景绝对定位在容器中*/ 
    96. 
	
  96. 
		    width:100%;  
    97. 
	
  97. 
		    height:130px;  
    98. 
	
  98. 
		    bottom:0;  
    99. 
	
  99. 
		    /*让背景色线性渐变,bottom,表示渐变的起始处，第一个颜色值是渐变的起始值，第二个颜色值是终止值 */ 
    100. 
	
  100. 
		    background:linear-grdaient(bottom,#33CC00,#66FF22);  
    101. 
	
  101. 
		    background:-webkit-linear-gradient(bottom,#33CC00,#66FF22);  
    102. 
	
  102. 
		    background:-moz-linear-gradient(bottom,#33CC00,#66FF22);  
    103. 
	
  103. 
		    background:-ms-linear-gradient(bottom,#33CC00,#66FF22);   
    104. 
	
  104. 
		 }  
    105. 
	
  105. 
		 
    106. 
	
  106. 
		 .hr,.vr  
    107. 
	
  107. 
		 {  
    108. 
	
  108. 
		    position:absolute;  
    109. 
	
  109. 
		    background:#3300FF;  
    110. 
	
  110. 
		 }  
    111. 
	
  111. 
		 
    112. 
	
  112. 
		 .hr  
    113. 
	
  113. 
		 {  
    114. 
	
  114. 
		    height:1px;  
    115. 
	
  115. 
		    width:100%;     /*轮胎的水平线*/ 
    116. 
	
  116. 
		    left:0;  
    117. 
	
  117. 
		    top:60px;  
    118. 
	
  118. 
		 }  
    119. 
	
  119. 
		 
    120. 
	
  120. 
		 .vr  
    121. 
	
  121. 
		 {  
    122. 
	
  122. 
		    width:1px;  
    123. 
	
  123. 
		    height:100%;    /*轮胎的垂直线*/ 
    124. 
	
  124. 
		    left:60px;  
    125. 
	
  125. 
		    top:0;  
    126. 
	
  126. 
		 } 
    127. 



			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机