3.JQuery与CSS3
这是一个效果与兼容性俱佳的方式（特别对于IE9暂不支持CSS3而言）
HTML代码（可以看到与CSS3中的HTML代码并无不同）：
<html>
<head>
<meta charset="UTF-8" />
<title>Animations in HTML5 using CSS3 animations</title>
</head>
<body>
<div id="container">
<div id="car">
<div id="chassis"></div>
<div id="backtire" class="tire">
<div class="hr"></div>
<div class="vr"></div>
</div>
<div id="fronttire" class="tire">
<div class="hr"></div>
<div class="vr"></div>
</div>
</div>
<div id="grass"></div>
</div>
<footer></footer>
</body>
</html>
CSS:
<style>
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;
}
</style>
