jquery CSS3 simuliert den animierten Menüeffekt von Path2.0 code_jquery

Das Beispiel in diesem Artikel beschreibt den animierten Menüeffektcode Path2.0 für die JQuery-CSS3-Simulation. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Das von CSS3 implementierte imitierte Mobiltelefon-Softwaremenü und das animierte Menü sind nach der Verschiebung der kleinen Schaltfläche unterschiedlich Gehen Sie gut mit diesen Details um, um den smarten Effekt wiederzugeben.

CSS3-Code: (Bitte verwenden Sie für den Zugriff einen Nicht-IE-Standardbrowser.) Aufgrund von Fehlern im Code-Ausführungsfeld aktualisieren Sie bitte zuerst die Seite, damit die Animation reibungsloser läuft. Die kleine Schaltfläche im Pfadmenü sollte sich auch drehen lassen, aber aus irgendeinem Grund hat die Drehung keine Auswirkung, wenn die Verschiebung und Drehung der CSS3-Animation gleichzeitig angezeigt werden, sodass ich es hier nicht herausgefunden habe Interessierte Freunde kann die Lösung studieren.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-css3-path2-style-flash-codes/

Der spezifische Code lautet wie folgt:

<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>

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.