jquery CSS3 simule l'effet de menu animé Path2.0 code_jquery

L'exemple de cet article décrit le code d'effet de menu animé Path2.0 de simulation jquery CSS3. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Le menu du logiciel d'imitation du téléphone mobile et le menu animé implémentés par CSS3. Notez qu'il y a un tampon après le déplacement du petit bouton. La distance du tampon de chaque petit bouton est différente. Gérez bien ces détails afin de refléter l’effet intelligent.

Code CSS3 : (Veuillez utiliser un navigateur standard non IE pour y accéder) En raison de défauts dans la zone d'exécution du code, veuillez d'abord actualiser la page pour que l'animation se déroule plus facilement. Le petit bouton du menu Chemin devrait également pouvoir pivoter, mais pour une raison quelconque, la rotation n'a aucun effet lorsque le déplacement et la rotation de l'animation CSS3 apparaissent en même temps, donc je ne l'ai pas compris ici. peut étudier la solution.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant :

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

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.