jquery+CSS3模擬Path2.0動(dòng)畫菜單效果代碼
更新時(shí)間：2015年08月31日 11:12:44 作者：企鵝
這篇文章主要介紹了jquery+CSS3模擬Path2.0動(dòng)畫菜單效果代碼,涉及jquery鼠標(biāo)click點(diǎn)擊事件及頁(yè)面元素樣式動(dòng)態(tài)變換的實(shí)現(xiàn)技巧,需要的朋友可以參考下
本文實(shí)例講述了jquery+CSS3模擬Path2.0動(dòng)畫菜單效果代碼。分享給大家供大家參考。具體如下：
CSS3實(shí)現(xiàn)的仿手機(jī)軟件菜單，動(dòng)畫菜單，注意的地方，小按鈕位移后有個(gè)緩沖，每個(gè)小按鈕緩沖的距離不一樣，每個(gè)小按鈕位移的時(shí)間有間隔，處理好這些細(xì)節(jié)才能體現(xiàn)出靈動(dòng)的效果。
CSS3代碼：(請(qǐng)用非IE標(biāo)準(zhǔn)瀏覽器訪問)由于代碼運(yùn)行框缺陷，請(qǐng)先刷新一下頁(yè)面動(dòng)畫運(yùn)行更流暢。Path菜單的小按鈕本來應(yīng)該也可以旋轉(zhuǎn)的，但CSS3動(dòng)畫的位移和旋轉(zhuǎn)同時(shí)出現(xiàn)時(shí)不知道為何旋轉(zhuǎn)就沒效果了，所以這里沒弄出來，感興趣的朋友可以研究一下解決方法。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/jquery-css3-path2-style-flash-codes/
具體代碼如下：
<title>CSS3模擬手機(jī)軟件Path2.0動(dòng)畫菜單</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>由于代碼運(yùn)行框缺陷，請(qǐng)先刷新一下頁(yè)面動(dòng)畫運(yùn)行更流暢</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>
希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jquery購(gòu)物車實(shí)時(shí)結(jié)算特效實(shí)現(xiàn)思路
購(gòu)物車是可以實(shí)時(shí)結(jié)算，下面為大家解釋下通過jquery是如何實(shí)現(xiàn)的，感興趣的朋友可以了解下2013-09-09
jQuery移動(dòng)端日期(datedropper)和時(shí)間(timedropper)選擇器附源碼下載
今天我給大家介紹一款非常有趣的日期和時(shí)間選擇器，它分為日期選擇器datedropper以及時(shí)間選擇器timedropper，他們倆尤其適合在移動(dòng)端上應(yīng)用。感興趣的小伙伴一起學(xué)習(xí)吧2016-04-04
jQuery的:parent選擇器匹配含有子元素或者文本的元素，空格也算是含有的元素，下面有幾個(gè)示例，大家可以學(xué)習(xí)下2014-07-07
jQuery解決下拉框select設(shè)寬度時(shí)IE 6/7/8下option超出顯示不全
jQuery解決IE 6/7/8 BUG：下拉框select設(shè)寬度時(shí)option超出顯示不全，經(jīng)過修改效果還不錯(cuò)，遇到類似情況的朋友可以參考下哈2013-05-05
jquery實(shí)現(xiàn)的3D旋轉(zhuǎn)木馬特效代碼分享
這篇文章主要介紹了jquery實(shí)現(xiàn)的3D旋轉(zhuǎn)木馬特效，功能實(shí)現(xiàn)非常簡(jiǎn)單，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
jquery實(shí)現(xiàn)的仿天貓側(cè)導(dǎo)航tab切換效果
這篇文章主要介紹了jquery實(shí)現(xiàn)的仿天貓側(cè)導(dǎo)航tab切換效果,涉及jquery鼠標(biāo)事件及鏈?zhǔn)讲僮鲗?shí)現(xiàn)頁(yè)面元素樣式遍歷切換效果的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
jQuery插件FusionCharts繪制的2D雙面積圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的2D雙面積圖效果,結(jié)合實(shí)例形式分析了jQuery使用插件FusionCharts結(jié)合xml格式數(shù)據(jù)繪制2D雙面積圖的具體步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-04-04
jQuery Mobile 是用于創(chuàng)建移動(dòng) Web 應(yīng)用的前端開發(fā)框架。這篇文章主要介紹了jQuery Mobile頁(yè)面返回不需要重新get 的相關(guān)資料,需要的朋友可以參考下2016-04-04
jQuery Dialog 打開時(shí)自動(dòng)聚焦的解決方法(兩種方法)
這篇文章主要介紹了jQuery Dialog 打開時(shí)自動(dòng)聚焦的解決方法,及jquery dialog打開時(shí)，自動(dòng)聚焦在第一個(gè)控件上的方法，對(duì)jquery dialog相關(guān)知識(shí)感興趣的朋友通過本文一起學(xué)習(xí)吧2016-11-11
一句jQuery代碼實(shí)現(xiàn)返回頂部效果（簡(jiǎn)單實(shí)用）
本文主要分享了利用一句jQuery代碼實(shí)現(xiàn)返回頂部效果的實(shí)例。代碼簡(jiǎn)單，保存到HTML文件就可以體驗(yàn)效果。下面跟著小編一起來看下吧2016-12-12