欢迎光临景诺科技软件开发淘宝店

进店请收藏,谢谢

css3+js实现动画效果

上一篇文章写的是 js+CSS2实现图片转动

这次我研究了css3+js 更简单。

css3 里面有一个 旋转的动画 属性

在不同浏览器下使用 如下:

-o-transform:rotate(0deg); /*旋转(单位:度)*/
-ms-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
这样就可以让你的div旋转起来了。不需要通过图片一帧帧来实现

我这个实例可以点击按钮控制车子的前进和后退。车轮也做相应的变化。相信你一定会感兴趣!

具体的代码如下 :

<html> 
   <head> 
      <meta charset="UTF-8" /> 
      <title>Animations in HTML5 using CSS3 animations</title> 
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head> 
	   
   <body> 
   <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> 
 
      <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> 
	  <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'))); //判断单前使用哪个内容的css3转动
 
         var origin={       /*设置我们的起始点*/ 
         left:-400,
		 }; 
 
         var animation={        /*该动画由jQuery执行*/ 
         left:2000      /*设置我们将移动到的最终位置*/ 
     }; 
 
         var rotate=function(){ /*该方法将被旋转的轮子调用*/ 
         rot+=2; 
         $('.tire').css(prefix,'rotate('+rot+'deg)');
		 //rotate();
     }; 
 
     var frotate=function(){ /*该方法将被旋转的轮子调用*/ 
         rot+=-2; 
         $('.tire').css(prefix,'rotate('+rot+'deg)');
		 //rotate();
     }; 
         var options={      /*将要被jQuery使用的参数*/ 
         easing:'linear',   /*指定速度,此处只是线性,即为匀速*/ 
         duration:100000,   /*指定动画持续时间*/		  
         complete:function(){ 
            $('#car').animate(animation,options); 
			// $('#car').css(origin).animate(animation,options); 从左到右
         },step:rotate 
		 
     }; 
	 
	
 
     //options.complete(); 
	 var divc =$(".c");	 
	 $(".shanmao").toggle(function(){
	 var cache = divc.data("ss")
	  $("#car").stop();	
	  var dqcss = $("#car").css("left");
	  divc.data("ss",dqcss); 	  
	  },function(){
	     options.complete(); 
	
	  	  });
		  
 $(".c1").click(function(){
 var end={left:1000};
 var endl=1000;
 var dqcss = $("#car").offset();
 var nowleft = dqcss.left;
 //alert(nowleft);
  //alert('left:'+end+'px');
 if(nowleft<endl){
    $('#car').animate(end,{easing:'linear',duration:2000,step:rotate}); 
 }else if(nowleft>endl){
  $('#car').animate(end,{easing:'linear',duration:1000,step:frotate}); 
 }else{
 //alert("xiangtong");
 }
 });	  
 $(".c2").click(function(){
 
    $('#car').animate({left:'1200px'},{easing:'linear',duration:1000,step:rotate});
 
 });		  	
		}); 

      </script> 
	  <div class="shanmao" id="shanmao"> ff</div>
		 <div class="c"></div><div class="c1">D1</div> <br>
<br>
<br>
<div class="c2">D2</div>
   </body> 
</html>  
 


可以点击这里下载 css3+js实现动画效果 demo

更多

本文固定链接: http://shanmao.me/web/jquery/css3-js-shi-xian-dong-hua-xiao-guo | 山猫的博客

该日志由 admin 于2012年04月25日发表在 css3, Div+Css, javascript, jQuery 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: css3+js实现动画效果 | 山猫的博客
关键字: , , , ,