css3+js实现动画效果 – 山猫的博客

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

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

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

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

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

具体的代码如下：
[code]
<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>

[/code]

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

“css3+js实现动画效果”的一个回复