JQUERY+CSS3 Simulate Path2.0 animation menu effect Code _jquery

This example describes the JQUERY+CSS3 simulation Path2.0 animation menu effect code. Share to everyone for your reference. Specifically as follows:

CSS3 implementation of The imitation mobile phone software menu, animation menu, attention to the place, small button after the displacement of a buffer, each small button buffer distance is different, each small button displacement time interval, handle these details can reflect the smart effect.

CSS3 Code: (Please use non-IE standard browser access) because the code runs the box flaw, please refresh the page animation to run more smoothly. The path menu of the small button should also be able to rotate, but the CSS3 animation of the displacement and rotation at the same time do not know why the rotation is no effect, so here is not out, interested friends can study the solution.

The screenshot of the running effect is as follows:

The online demo address is as follows:

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

The specific code is as follows:

&LT;TITLE&GT;CSS3 analog Mobile software Path2.0 animation menu </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:a
Bsolute;} . 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-durat
 ion:0.3s;
-webkit-animation-iteration-count:1; }/* Main Menu/* @-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-an
 imation-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); /* Photo Button/* @-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;
 }/* Position button/* @-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; }/* Music button/* @-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;
 }/* Chat button/* @-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; /* Night button/* @-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> due to code run box flaw, please refresh the page animation run more smoothly </p> <div class= "Phone" > <div class= "Menu" >< Span> menu </span></div> <div class= "btn btn1" ><span> photography </span></div> <div class= "btn btn2" ><span> location </span></div> <div class= "btn btn3" ><span> music </span ></div> <div class= "btn btn4" ><span> chat </span></div> <div class= "btn btn5" > <span> Night </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>

I hope this article will help you with your jquery programming.