基本信息
源码名称：HTML5 实现小车动画效果(Canvas/CSS3/JQuery) 付完整源码
源码大小：5.26KB
文件格式：.rar
开发语言：CSS
更新时间：2013-07-01
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍

 

分三种方式实现：

(1)   canvas元素结合JS

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

(3)   CSS3结合Jquery实现

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



<html>
   <head>
      <meta charset="UTF-8" />
      <title>Animations in HTML5 using CSS3 animations</title>
      <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>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <script>
         $(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
	 };

	     options.complete();
	  });
      </script>
   </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>