html制作小车,HTML5 实现小车动画效果(Canvas/CSS3/JQuery) 付完整源码

【实例简介】

分三种方式实现：

(1)   canvas元素结合JS

(2)   纯粹的CSS3动画(暂不被所有主流浏览器支持，比如IE)

(3)   CSS3结合Jquery实现

知道如何使用CSS3动画比知道如何使用元素更重要：因为浏览器能够优化那些元素的性能(通常是他们的样式，比如CSS)，而我们使用canvas自定义画出来的效果却不能被优化。原因又在于，浏览器使用的硬件主要取决于显卡的能力。目前，浏览器没有给予我们直接访问显卡的权力，比如，每一个绘画操作都不得不在浏览器中先调用某些函数。

【实例截图】

【核心代码】

Animations in HTML5 using CSS3 animations

body

{

padding:0;

margin:0;

}

#container

{

position:relative;

width:100%;

height:600px;

overflow:hidden;/*这个很重要*/

}

#car

{

position:absolute; /*汽车在容器中采用绝对定位*/

width:400px;

height:210px;/*汽车的总高度，包括轮胎和底盘*/

z-index:1;/