jquery+CSS3模拟Path2.0动画菜单效果代码

<title>CSS3模拟手机软件Path2.0动画菜单</title>

<script src="jquery-1.6.2.min.js"></script>

<style type="text/css">

body { background:#f1eee7}

.phone { width:320px; height:480px; border:#000 solid 1px; position:absolute;}

.menu { width:47px; height:47px; border-radius:47px; border:#fff solid 6px; box-shadow: 0 2px 5px 1px #aaa; cursor:pointer; position:absolute; bottom:15px; left:15px; z-index:10;

background:#c72d15;

background:-webkit-gradient(linear, left top, left bottom, from(#d45753), to(#c22e10), color-stop(0.5, #d63523), color-stop(0.5, #d1261c));}

.menu span { display:block; width:27px; height:27px; background:url(images/bg1.png); text-indent:-999px; position:absolute; top:50%; left:50%; margin-top:-13px; margin-left:-13px; overflow:hidden;}

.btn { width:36px; height:36px; border-radius:36px; border:#fff solid 6px; box-shadow: 0 2px 5px 1px #aaa; cursor:pointer; background:#3b3b3b; position:absolute; bottom:0; left:0; margin-bottom:20px; margin-left:20px;}

.btn span { display:block; width:22px; height:24px; text-indent:-999px; position:absolute; top:50%; left:50%; margin-top:-12px; margin-left:-11px; overflow:hidden; background:url(images/bg1.png) no-repeat;}

.btn1 span { background-position:-27px 0; }

.btn2 span { background-position:-49px 0; }

.btn3 span { background-position:-71px 0; }

.btn4 span { background-position:-93px 0; }

.btn5 span { background-position:-115px 0; }

.btn {

 -webkit-animation-duration:0.3s;

 -webkit-animation-iteration-count:1;

}

/*主菜单*/

@-webkit-keyframes open {

 0%{ -webkit-transform:rotate(0)}

 100%{ -webkit-transform:rotate(-225deg)}

}

@-webkit-keyframes close{

 0%{ -webkit-transform:rotate(45deg)}

 100%{ -webkit-transform:rotate(270deg)}

}

.menu span{

 -webkit-animation-duration:0.5s;

 -webkit-animation-iteration-count:1;

}

.menu span.open {

 -webkit-animation-name:open;

 -webkit-transform:rotate(-225deg);

}

.menu span.close {

 -webkit-animation-name:close;

 -webkit-transform:rotate(270deg);

}

/*照相按钮*/

@-webkit-keyframes btn1open {

 0%{ -webkit-transform:translate(0,175px);}

 20%{ -webkit-transform:translate(0,-10px);}

 100%{ -webkit-transform:translate(0, 0);}

}

@-webkit-keyframes btn1close{

 0%{ -webkit-transform:translate(0,-185px);}

 90%{ -webkit-transform:translate(0,-175px);}

 100%{ -webkit-transform:translate(0, 0);}

}

.btn1.open {

 -webkit-animation-name:btn1open;

 bottom:175px;

 left:0;

}

.btn1.close {

 -webkit-animation-name:btn1close;

 bottom:0;

 left:0;

}

/*位置按钮*/

@-webkit-keyframes btn2open {

 0%{ -webkit-transform:translate(-70px,160px);}

 30%{ -webkit-transform:translate(5px,-10px);}

 100%{ -webkit-transform:translate(0, 0);}

}

@-webkit-keyframes btn2close{

 0%{ -webkit-transform:translate(75px,-170px);}

 70%{ -webkit-transform:translate(70px,-160px);}

 100%{ -webkit-transform:translate(0, 0);}

}

.btn2.open {

 -webkit-animation-name:btn2open;

 bottom:160px;

 left:70px;

}

.btn2.close {

 -webkit-animation-name:btn2close;

 bottom:0;

 left:0;

}

/*音乐按钮*/

@-webkit-keyframes btn3open {

 0%{ -webkit-transform:translate(-130px,120px);}

 50%{ -webkit-transform:translate(10px,-10px);}

 100%{ -webkit-transform:translate(0, 0);}

}

@-webkit-keyframes btn3close{

 0%{ -webkit-transform:translate(140px,-135px);}

 50%{ -webkit-transform:translate(130px,-120px);}

 100%{ -webkit-transform:translate(0, 0);}

}

.btn3.open {

 -webkit-animation-name:btn3open;

 bottom:125px;

 left:130px;

}

.btn3.close {

 -webkit-animation-name:btn3close;

 bottom:0;

 left:0;

}

/*聊天按钮*/

@-webkit-keyframes btn4open {

 0%{ -webkit-transform:translate(-160px,65px);}

 70%{ -webkit-transform:translate(10px,-5px);}

 100%{ -webkit-transform:translate(0, 0);}

}

@-webkit-keyframes btn4close{

 0%{ -webkit-transform:translate(170px,-70px);}

 30%{ -webkit-transform:translate(160px,-65px);}

 100%{ -webkit-transform:translate(0, 0);}

}

.btn4.open {

 -webkit-animation-name:btn4open;

 bottom:65px;

 left:160px;

}

.btn4.close {

 -webkit-animation-name:btn4close;

 bottom:0;

 left:0;

}

/*夜间按钮*/

@-webkit-keyframes btn5open {

 0%{ -webkit-transform:translate(-175px,0);}

 90%{ -webkit-transform:translate(10px,0);}

 100%{ -webkit-transform:translate(0, 0);}

}

@-webkit-keyframes btn5close{

 0%{ -webkit-transform:translate(185px,0);}

 10%{ -webkit-transform:translate(175px,0);}

 100%{ -webkit-transform:translate(0, 0);}

}

.btn5.open {

 -webkit-animation-name:btn5open;

 bottom:0;

 left:175px;

}

.btn5.close {

 -webkit-animation-name:btn5close;

 bottom:0;

 left:0;

}

</style>

<p>由于代码运行框缺陷，请先刷新一下页面动画运行更流畅</p>

<div class="phone">

 <div class="menu"><span>菜单</span></div>

 <div class="btn btn1"><span>照相</span></div>

 <div class="btn btn2"><span>位置</span></div>

 <div class="btn btn3"><span>音乐</span></div>

 <div class="btn btn4"><span>聊天</span></div>

 <div class="btn btn5"><span>夜间</span></div>

</div>

<script>

$(".menu").click(function(){

 var span = $(this).find("span");

 if(span.attr("class") == "open"){

  span.removeClass("open");

  span.addClass("close");

  $(".btn").removeClass("open");

  $(".btn").addClass("close");

 }else{

  span.removeClass("close");

  span.addClass("open");

  $(".btn").removeClass("close");

  $(".btn").addClass("open");

 }

});

</script>