【实例简介】
分三种方式实现：
(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;/*让汽车在背景的上方*/
top:300px;/*距顶端的距离(y轴)*/
left:50px;/*距左侧的距离(x轴)*/
}
/*车身*/
#chassis
{
position:absolute;
width:400px;
height:130px;
background:#FF9900;
border: 2px solid #FF6600;
}
/*轮胎*/
.tire
{
z-index:1;/*同上，轮胎也应置于背景的上方*/
position:absolute;
bottom:0;
border-radius:60px;/*圆半径*/
height:120px;/* 2*radius=height */
width:120px;/* 2*radius=width */
background:#0099FF;/*填充色*/
border:1px solid #3300FF;
-o-transform:rotate(0deg);/*旋转(单位：度)*/
-ms-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
}
#fronttire
{
right:20px;/*设置右边的轮胎距离边缘的距离为20*/
}
#backtire
{
left:20px;/*设置左边的轮胎距离边缘的距离为20*/
}
#grass
{
position:absolute;/*背景绝对定位在容器中*/
width:100%;
height:130px;
bottom:0;
/*让背景色线性渐变,bottom,表示渐变的起始处，第一个颜色值是渐变的起始值，第二个颜色值是终止值 */
background:linear-grdaient(bottom,#33CC00,#66FF22);
background:-webkit-linear-gradient(bottom,#33CC00,#66FF22);
background:-moz-linear-gradient(bottom,#33CC00,#66FF22);
background:-ms-linear-gradient(bottom,#33CC00,#66FF22);
}
.hr,.vr
{
position:absolute;
background:#3300FF;
}
.hr
{
height:1px;
width:100%;/*水平线*/
left:0;
top:60px;
}
.vr
{
width:1px;
height:100%;/*垂直线*/
left:60px;
top:0;
}
$(function(){
var rot=0;
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')));
var origin={/*设置我们的起始点*/
left:-400
};
var animation={/*该动画由jQuery执行*/
left:1600/*设置我们将移动到的最终位置*/
};
var rotate=function(){/*该方法将被旋转的轮子调用*/
rot =2;
$('.tire').css(prefix,'rotate(' rot 'deg)');
};
var options={/*将要被jQuery使用的参数*/
easing:'linear',/*指定速度，此处只是线性，即为匀速*/
duration:10000,/*指定动画持续时间*/
complete:function(){
$('#car').css(origin).animate(animation,options);
},
step:rotate
};
plete();
});
