网页中列表图标随处可见，特别是移动网页上，基本上的导航都采用了列表图标。今天给大家分享4款基于juqery的列表图标和关闭图标的动画切换特效。喜欢的网友赶紧收藏吧。

在线预览   源码下载

实现的代码。

html代码：

  1.  <div class="container">
  2.         <div class="row">
  3.             <div class="col-sm-12">
  4.                 <h1>
  5.                     The Hamburger Menu</h1>
  6.                 <p>
  7.                     (click)</p>
  8.                 <div class="navToggle1">
  9.                     <div class="icon-left">
  10.                     </div>
  11.                     <div class="icon-right">
  12.                     </div>
  13.                 </div>
  14.                 <div class="navToggle2">
  15.                     <div class="icon">
  16.                     </div>
  17.                 </div>
  18.                 <div class="navToggle3">
  19.                     <div class="icon">
  20.                     </div>
  21.                 </div>
  22.                 <div class="navToggle4">
  23.                     <div class="icon">
  24.                     </div>
  25.                 </div>
  26.                 <div class="navToggle5">
  27.                     <div class="icon">
  28.                     </div>
  29.                 </div>
  30.                 <div class="navToggle6">
  31.                     <div class="icon">
  32.                     </div>
  33.                 </div>
  34.                 <div class="navToggle7">
  35.                     <div class="icon-E">
  36.                     </div>
  37.                     <div class="icon-X">
  38.                     </div>
  39.                 </div>
  40.                 <div class="navToggle8">
  41.                     <div class="icon-E">
  42.                     </div>
  43.                     <div class="icon-X">
  44.                     </div>
  45.                 </div>
  46.                 <div class="navToggle9">
  47.                     <div class="icon">
  48.                     </div>
  49.                 </div>
  50.                 <div class="navToggle10">
  51.                     <div class="icon">
  52.                     </div>
  53.                 </div>
  54.                 <div class="navToggle11">
  55.                     <div class="icon-left">
  56.                     </div>
  57.                     <div class="icon-right">
  58.                     </div>
  59.                 </div>
  60.                 <div class="navToggle12">
  61.                     <div class="icon">
  62.                     </div>
  63.                 </div>
  64.                 <div class="navToggle13">
  65.                     <div class="icon">
  66.                     </div>
  67.                 </div>
  68.             </div>
  69.         </div>
  70.     </div>

css代码：

  1.   body
  2.         {
  3.             background-color: #efefef;
  4.             font-family: 'Roboto' , sans-serif;
  5.             color: #212121;
  6.         }
  7.  
  8.         .container
  9.         {
  10.             position: relative;
  11.             max-width: 420px;
  12.             width: 100%;
  13.             margin: 0 auto;
  14.         }
  15.  
  16.         h1, p
  17.         {
  18.             text-align: center;
  19.         }
  20.  
  21.         .navToggle1
  22.         {
  23.             position: absolute;
  24.             width: 60px;
  25.             height: 120px;
  26.             top: 60px;
  27.             left: 0px;
  28.             -webkit-transition-duration: 0.5s;
  29.             transition-duration: 0.5s;
  30.         }
  31.         .navToggle1 .icon-left
  32.         {
  33.             -webkit-transition-duration: 0.5s;
  34.             transition-duration: 0.5s;
  35.             position: absolute;
  36.             height: 8px;
  37.             width: 30px;
  38.             top: 60px;
  39.             background-color: #212121;
  40.         }
  41.         .navToggle1 .icon-left:before
  42.         {
  43.             -webkit-transition-duration: 0.5s;
  44.             transition-duration: 0.5s;
  45.             position: absolute;
  46.             width: 30px;
  47.             height: 8px;
  48.             background-color: #212121;
  49.             content: "";
  50.             top: -20px;
  51.         }
  52.         .navToggle1 .icon-left:after
  53.         {
  54.             -webkit-transition-duration: 0.5s;
  55.             transition-duration: 0.5s;
  56.             position: absolute;
  57.             width: 30px;
  58.             height: 8px;
  59.             background-color: #212121;
  60.             content: "";
  61.             top: 20px;
  62.         }
  63.         .navToggle1 .icon-left:hover
  64.         {
  65.             cursor: pointer;
  66.         }
  67.         .navToggle1 .icon-right
  68.         {
  69.             -webkit-transition-duration: 0.5s;
  70.             transition-duration: 0.5s;
  71.             position: absolute;
  72.             height: 8px;
  73.             width: 30px;
  74.             top: 60px;
  75.             background-color: #212121;
  76.             left: 30px;
  77.         }
  78.         .navToggle1 .icon-right:before
  79.         {
  80.             -webkit-transition-duration: 0.5s;
  81.             transition-duration: 0.5s;
  82.             position: absolute;
  83.             width: 30px;
  84.             height: 8px;
  85.             background-color: #212121;
  86.             content: "";
  87.             top: -20px;
  88.         }
  89.         .navToggle1 .icon-right:after
  90.         {
  91.             -webkit-transition-duration: 0.5s;
  92.             transition-duration: 0.5s;
  93.             position: absolute;
  94.             width: 30px;
  95.             height: 8px;
  96.             background-color: #212121;
  97.             content: "";
  98.             top: 20px;
  99.         }
  100.         .navToggle1 .icon-right:hover
  101.         {
  102.             cursor: pointer;
  103.         }
  104.         .navToggle1.open .icon-left
  105.         {
  106.             -webkit-transition-duration: 0.5s;
  107.             transition-duration: 0.5s;
  108.             background: transparent;
  109.         }
  110.         .navToggle1.open .icon-left:before
  111.         {
  112.             -webkit-transform: rotateZ(45deg) scaleX(1.4) translate(4px, 4px);
  113.             transform: rotateZ(45deg) scaleX(1.4) translate(4px, 4px);
  114.         }
  115.         .navToggle1.open .icon-left:after
  116.         {
  117.             -webkit-transform: rotateZ(-45deg) scaleX(1.4) translate(4px, -4px);
  118.             transform: rotateZ(-45deg) scaleX(1.4) translate(4px, -4px);
  119.         }
  120.         .navToggle1.open .icon-right
  121.         {
  122.             -webkit-transition-duration: 0.5s;
  123.             transition-duration: 0.5s;
  124.             background: transparent;
  125.         }
  126.         .navToggle1.open .icon-right:before
  127.         {
  128.             -webkit-transform: rotateZ(-45deg) scaleX(1.4) translate(-4px, 4px);
  129.             transform: rotateZ(-45deg) scaleX(1.4) translate(-4px, 4px);
  130.         }
  131.         .navToggle1.open .icon-right:after
  132.         {
  133.             -webkit-transform: rotateZ(45deg) scaleX(1.4) translate(-4px, -4px);
  134.             transform: rotateZ(45deg) scaleX(1.4) translate(-4px, -4px);
  135.         }
  136.  
  137.         .navToggle2
  138.         {
  139.             position: absolute;
  140.             width: 60px;
  141.             height: 120px;
  142.             top: 60px;
  143.             left: 120px;
  144.             -webkit-transition-duration: 0.5s;
  145.             transition-duration: 0.5s;
  146.         }
  147.         .navToggle2 .icon
  148.         {
  149.             -webkit-transition-duration: 0.5s;
  150.             transition-duration: 0.5s;
  151.             position: absolute;
  152.             height: 8px;
  153.             width: 60px;
  154.             top: 60px;
  155.             background-color: #212121;
  156.         }
  157.         .navToggle2 .icon:before
  158.         {
  159.             -webkit-transition-duration: 0.5s;
  160.             transition-duration: 0.5s;
  161.             position: absolute;
  162.             width: 60px;
  163.             height: 8px;
  164.             background-color: #212121;
  165.             content: "";
  166.             top: -20px;
  167.         }
  168.         .navToggle2 .icon:after
  169.         {
  170.             -webkit-transition-duration: 0.5s;
  171.             transition-duration: 0.5s;
  172.             position: absolute;
  173.             width: 60px;
  174.             height: 8px;
  175.             background-color: #212121;
  176.             content: "";
  177.             top: 20px;
  178.         }
  179.         .navToggle2 .icon:hover
  180.         {
  181.             cursor: pointer;
  182.         }
  183.         .navToggle2.open .icon
  184.         {
  185.             -webkit-transition-duration: 0.5s;
  186.             transition-duration: 0.5s;
  187.             background: transparent;
  188.         }
  189.         .navToggle2.open .icon:before
  190.         {
  191.             -webkit-transform: rotateZ(45deg) scaleX(1.25) translate(13px, 13px);
  192.             transform: rotateZ(45deg) scaleX(1.25) translate(13px, 13px);
  193.         }
  194.         .navToggle2.open .icon:after
  195.         {
  196.             -webkit-transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
  197.             transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
  198.         }
  199.  
  200.         .navToggle3
  201.         {
  202.             position: absolute;
  203.             width: 60px;
  204.             height: 120px;
  205.             top: 60px;
  206.             left: 240px;
  207.             -webkit-transition-duration: 0.5s;
  208.             transition-duration: 0.5s;
  209.         }
  210.         .navToggle3 .icon
  211.         {
  212.             -webkit-transition-duration: 0.5s;
  213.             transition-duration: 0.5s;
  214.             position: absolute;
  215.             height: 0px;
  216.             width: 60px;
  217.             top: 60px;
  218.             background-color: #212121;
  219.         }
  220.         .navToggle3 .icon:before
  221.         {
  222.             -webkit-transition-duration: 0.5s;
  223.             transition-duration: 0.5s;
  224.             position: absolute;
  225.             width: 60px;
  226.             height: 8px;
  227.             background-color: #212121;
  228.             content: "";
  229.             top: -20px;
  230.         }
  231.         .navToggle3 .icon:after
  232.         {
  233.             -webkit-transition-duration: 0.5s;
  234.             transition-duration: 0.5s;
  235.             position: absolute;
  236.             width: 60px;
  237.             height: 8px;
  238.             background-color: #212121;
  239.             content: "";
  240.             top: 20px;
  241.         }
  242.         .navToggle3 .icon:hover
  243.         {
  244.             cursor: pointer;
  245.         }
  246.         .navToggle3.open .icon
  247.         {
  248.             -webkit-transition-duration: 0.5s;
  249.             transition-duration: 0.5s;
  250.         }
  251.         .navToggle3.open .icon:before
  252.         {
  253.             -webkit-transform: rotateZ(135deg) scaleX(1.25) translate(13px, -13px);
  254.             transform: rotateZ(135deg) scaleX(1.25) translate(13px, -13px);
  255.         }
  256.         .navToggle3.open .icon:after
  257.         {
  258.             -webkit-transform: rotateZ(-135deg) scaleX(1.25) translate(12px, 12px);
  259.             transform: rotateZ(-135deg) scaleX(1.25) translate(12px, 12px);
  260.         }
  261.  
  262.         .navToggle4
  263.         {
  264.             position: absolute;
  265.             width: 60px;
  266.             height: 120px;
  267.             top: 60px;
  268.             left: 360px;
  269.             -webkit-transition-duration: 0.5s;
  270.             transition-duration: 0.5s;
  271.         }
  272.         .navToggle4 .icon
  273.         {
  274.             -webkit-transition-duration: 0.5s;
  275.             transition-duration: 0.5s;
  276.             position: absolute;
  277.             height: 0px;
  278.             width: 60px;
  279.             top: 60px;
  280.             background-color: #212121;
  281.         }
  282.         .navToggle4 .icon:before
  283.         {
  284.             -webkit-transition-duration: 0.5s;
  285.             transition-duration: 0.5s;
  286.             position: absolute;
  287.             width: 60px;
  288.             height: 8px;
  289.             background-color: #212121;
  290.             content: "";
  291.             top: -20px;
  292.         }
  293.         .navToggle4 .icon:after
  294.         {
  295.             -webkit-transition-duration: 0.5s;
  296.             transition-duration: 0.5s;
  297.             position: absolute;
  298.             width: 60px;
  299.             height: 8px;
  300.             background-color: #212121;
  301.             content: "";
  302.             top: 20px;
  303.         }
  304.         .navToggle4 .icon:hover
  305.         {
  306.             cursor: pointer;
  307.         }
  308.         .navToggle4.open .icon
  309.         {
  310.             -webkit-transition: 0.5s;
  311.             transition: 0.5s;
  312.         }
  313.         .navToggle4.open .icon:before
  314.         {
  315.             -webkit-transform: rotateZ(45deg) scaleX(1.25) translate(12px, 12px);
  316.             transform: rotateZ(45deg) scaleX(1.25) translate(12px, 12px);
  317.         }
  318.         .navToggle4.open .icon:after
  319.         {
  320.             -webkit-transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
  321.             transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
  322.         }
  323.  
  324.         .navToggle5
  325.         {
  326.             position: absolute;
  327.             width: 60px;
  328.             height: 120px;
  329.             top: 180px;
  330.             left: 0px;
  331.             -webkit-transition-duration: 0.5s;
  332.             transition-duration: 0.5s;
  333.         }
  334.         .navToggle5 .icon
  335.         {
  336.             -webkit-transition-duration: 0.5s;
  337.             transition-duration: 0.5s;
  338.             position: absolute;
  339.             height: 8px;
  340.             width: 60px;
  341.             top: 60px;
  342.             background-color: #212121;
  343.         }
  344.         .navToggle5 .icon:before
  345.         {
  346.             -webkit-transition-duration: 0.5s;
  347.             transition-duration: 0.5s;
  348.             position: absolute;
  349.             width: 60px;
  350.             height: 8px;
  351.             background-color: #212121;
  352.             content: "";
  353.             top: -20px;
  354.         }
  355.         .navToggle5 .icon:after
  356.         {
  357.             -webkit-transition-duration: 0.5s;
  358.             transition-duration: 0.5s;
  359.             position: absolute;
  360.             width: 60px;
  361.             height: 8px;
  362.             background-color: #212121;
  363.             content: "";
  364.             top: 20px;
  365.         }
  366.         .navToggle5 .icon:hover
  367.         {
  368.             cursor: pointer;
  369.         }
  370.         .navToggle5.open .icon
  371.         {
  372.             -webkit-transition: 0.5s;
  373.             transition: 0.5s;
  374.         }
  375.         .navToggle5.open .icon:before
  376.         {
  377.             -webkit-transform: rotateZ(-45deg) scaleX(0.75) translate(-20px, -6px);
  378.             transform: rotateZ(-45deg) scaleX(0.75) translate(-20px, -6px);
  379.         }
  380.         .navToggle5.open .icon:after
  381.         {
  382.             -webkit-transform: rotateZ(45deg) scaleX(0.75) translate(-20px, 6px);
  383.             transform: rotateZ(45deg) scaleX(0.75) translate(-20px, 6px);
  384.         }
  385.  
  386.         .navToggle6
  387.         {
  388.             position: absolute;
  389.             width: 60px;
  390.             height: 120px;
  391.             top: 180px;
  392.             left: 120px;
  393.             -webkit-transition-duration: 0.5s;
  394.             transition-duration: 0.5s;
  395.         }
  396.         .navToggle6 .icon
  397.         {
  398.             -webkit-transition-duration: 0.5s;
  399.             transition-duration: 0.5s;
  400.             position: absolute;
  401.             height: 8px;
  402.             width: 60px;
  403.             top: 60px;
  404.             background-color: #212121;
  405.         }
  406.         .navToggle6 .icon:before
  407.         {
  408.             -webkit-transition-duration: 0.5s;
  409.             transition-duration: 0.5s;
  410.             position: absolute;
  411.             width: 60px;
  412.             height: 8px;
  413.             background-color: #212121;
  414.             content: "";
  415.             top: -20px;
  416.         }
  417.         .navToggle6 .icon:after
  418.         {
  419.             -webkit-transition-duration: 0.5s;
  420.             transition-duration: 0.5s;
  421.             position: absolute;
  422.             width: 60px;
  423.             height: 8px;
  424.             background-color: #212121;
  425.             content: "";
  426.             top: 20px;
  427.         }
  428.         .navToggle6 .icon:hover
  429.         {
  430.             cursor: pointer;
  431.         }
  432.         .navToggle6.open .icon
  433.         {
  434.             -webkit-transition-duration: 0.5s;
  435.             transition-duration: 0.5s;
  436.             -webkit-transform: rotateZ(180deg);
  437.             transform: rotateZ(180deg);
  438.         }
  439.         .navToggle6.open .icon:before
  440.         {
  441.             -webkit-transform: rotateZ(45deg) scaleX(0.75) translate(20px, -6px);
  442.             transform: rotateZ(45deg) scaleX(0.75) translate(20px, -6px);
  443.         }
  444.         .navToggle6.open .icon:after
  445.         {
  446.             -webkit-transform: rotateZ(-45deg) scaleX(0.75) translate(20px, 6px);
  447.             transform: rotateZ(-45deg) scaleX(0.75) translate(20px, 6px);
  448.         }
  449.  
  450.         .navToggle7
  451.         {
  452.             position: absolute;
  453.             width: 60px;
  454.             height: 120px;
  455.             top: 180px;
  456.             left: 240px;
  457.             -webkit-transition-duration: 0.5s;
  458.             transition-duration: 0.5s;
  459.         }
  460.         .navToggle7 .icon-E
  461.         {
  462.             -webkit-transition-duration: 0.5s;
  463.             transition-duration: 0.5s;
  464.             position: absolute;
  465.             height: 8px;
  466.             width: 60px;
  467.             top: 60px;
  468.             background-color: #212121;
  469.             -webkit-transition-delay: 0.5s;
  470.             transition-delay: 0.5s;
  471.         }
  472.         .navToggle7 .icon-E:before
  473.         {
  474.             -webkit-transition-duration: 0.5s;
  475.             transition-duration: 0.5s;
  476.             position: absolute;
  477.             width: 60px;
  478.             height: 8px;
  479.             background-color: #212121;
  480.             content: "";
  481.             top: -20px;
  482.         }
  483.         .navToggle7 .icon-E:after
  484.         {
  485.             -webkit-transition-duration: 0.5s;
  486.             transition-duration: 0.5s;
  487.             position: absolute;
  488.             width: 60px;
  489.             height: 8px;
  490.             background-color: #212121;
  491.             content: "";
  492.             top: 20px;
  493.         }
  494.         .navToggle7 .icon-E:hover
  495.         {
  496.             cursor: pointer;
  497.         }
  498.         .navToggle7 .icon-X
  499.         {
  500.             -webkit-transition-duration: 0.5s;
  501.             transition-duration: 0.5s;
  502.             position: absolute;
  503.             height: 0px;
  504.             width: 60px;
  505.             top: 60px;
  506.             background-color: #212121;
  507.             -webkit-transform: scaleX(0);
  508.             -ms-transform: scaleX(0);
  509.             transform: scaleX(0);
  510.         }
  511.         .navToggle7 .icon-X:before
  512.         {
  513.             -webkit-transition-duration: 0.5s;
  514.             transition-duration: 0.5s;
  515.             position: absolute;
  516.             width: 60px;
  517.             height: 8px;
  518.             background-color: #212121;
  519.             content: "";
  520.             top: -20px;
  521.             -webkit-transform: rotateZ(45deg) scaleX(1.25) translate(12px, 12px);
  522.             transform: rotateZ(45deg) scaleX(1.25) translate(12px, 12px);
  523.         }
  524.         .navToggle7 .icon-X:after
  525.         {
  526.             -webkit-transition-duration: 0.5s;
  527.             transition-duration: 0.5s;
  528.             position: absolute;
  529.             width: 60px;
  530.             height: 8px;
  531.             background-color: #212121;
  532.             content: "";
  533.             top: 20px;
  534.             -webkit-transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
  535.             transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
  536.         }
  537.         .navToggle7 .icon-X:hover
  538.         {
  539.             cursor: pointer;
  540.         }
  541.         .navToggle7.open .icon-E
  542.         {
  543.             -webkit-transition-duration: 0.5s;
  544.             transition-duration: 0.5s;
  545.             -webkit-transform: scaleX(0);
  546.             -ms-transform: scaleX(0);
  547.             transform: scaleX(0);
  548.             -webkit-transition-delay: 0s;
  549.             transition-delay: 0s;
  550.         }
  551.         .navToggle7.open .icon-X
  552.         {
  553.             -webkit-transition: 0.5s;
  554.             transition: 0.5s;
  555.             -webkit-transition-delay: 0.5s;
  556.             transition-delay: 0.5s;
  557.             -webkit-transform: scaleX(1);
  558.             -ms-transform: scaleX(1);
  559.             transform: scaleX(1);
  560.         }
  561.  
  562.         .navToggle8
  563.         {
  564.             position: absolute;
  565.             width: 60px;
  566.             height: 120px;
  567.             top: 180px;
  568.             left: 360px;
  569.             -webkit-transition-duration: 0.5s;
  570.             transition-duration: 0.5s;
  571.         }
  572.         .navToggle8 .icon-E
  573.         {
  574.             -webkit-transition-duration: 0.5s;
  575.             transition-duration: 0.5s;
  576.             position: absolute;
  577.             height: 8px;
  578.             width: 60px;
  579.             top: 60px;
  580.             background-color: #212121;
  581.             -webkit-transform-origin: 0px 0px;
  582.             -ms-transform-origin: 0px 0px;
  583.             transform-origin: 0px 0px;
  584.             -webkit-transition-delay: 0.5s;
  585.             transition-delay: 0.5s;
  586.         }
  587.         .navToggle8 .icon-E:before
  588.         {
  589.             -webkit-transition-duration: 0.5s;
  590.             transition-duration: 0.5s;
  591.             position: absolute;
  592.             width: 60px;
  593.             height: 8px;
  594.             background-color: #212121;
  595.             content: "";
  596.             top: -20px;
  597.         }
  598.         .navToggle8 .icon-E:after
  599.         {
  600.             -webkit-transition-duration: 0.5s;
  601.             transition-duration: 0.5s;
  602.             position: absolute;
  603.             width: 60px;
  604.             height: 8px;
  605.             background-color: #212121;
  606.             content: "";
  607.             top: 20px;
  608.         }
  609.         .navToggle8 .icon-E:hover
  610.         {
  611.             cursor: pointer;
  612.         }
  613.         .navToggle8 .icon-X
  614.         {
  615.             -webkit-transition-duration: 0.5s;
  616.             transition-duration: 0.5s;
  617.             position: absolute;
  618.             height: 0px;
  619.             width: 60px;
  620.             top: 60px;
  621.             background-color: #212121;
  622.             -webkit-transform-origin: 0px 0px;
  623.             -ms-transform-origin: 0px 0px;
  624.             transform-origin: 0px 0px;
  625.             -webkit-transform: scaleY(0);
  626.             -ms-transform: scaleY(0);
  627.             transform: scaleY(0);
  628.         }
  629.         .navToggle8 .icon-X:before
  630.         {
  631.             -webkit-transition-duration: 0.5s;
  632.             transition-duration: 0.5s;
  633.             position: absolute;
  634.             width: 60px;
  635.             height: 8px;
  636.             background-color: #212121;
  637.             content: "";
  638.             top: -20px;
  639.             -webkit-transform: rotateZ(45deg) scaleX(1.25) translate(12px, 12px);
  640.             transform: rotateZ(45deg) scaleX(1.25) translate(12px, 12px);
  641.         }
  642.         .navToggle8 .icon-X:after
  643.         {
  644.             -webkit-transition-duration: 0.5s;
  645.             transition-duration: 0.5s;
  646.             position: absolute;
  647.             width: 60px;
  648.             height: 8px;
  649.             background-color: #212121;
  650.             content: "";
  651.             top: 20px;
  652.             -webkit-transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
  653.             transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
  654.         }
  655.         .navToggle8 .icon-X:hover
  656.         {
  657.             cursor: pointer;
  658.         }
  659.         .navToggle8.open .icon-E
  660.         {
  661.             -webkit-transition-duration: 0.5s;
  662.             transition-duration: 0.5s;
  663.             -webkit-transform: scaleY(0);
  664.             -ms-transform: scaleY(0);
  665.             transform: scaleY(0);
  666.             -webkit-transition-delay: 0s;
  667.             transition-delay: 0s;
  668.         }
  669.         .navToggle8.open .icon-X
  670.         {
  671.             -webkit-transition: 0.5s;
  672.             transition: 0.5s;
  673.             -webkit-transition-delay: 0.5s;
  674.             transition-delay: 0.5s;
  675.             -webkit-transform: scaleY(1);
  676.             -ms-transform: scaleY(1);
  677.             transform: scaleY(1);
  678.         }
  679.  
  680.         .navToggle9
  681.         {
  682.             position: absolute;
  683.             width: 60px;
  684.             height: 120px;
  685.             top: 305px;
  686.             left: 0px;
  687.             -webkit-transition-duration: 0.5s;
  688.             transition-duration: 0.5s;
  689.         }
  690.         .navToggle9 .icon
  691.         {
  692.             -webkit-transition-duration: 0.5s;
  693.             transition-duration: 0.5s;
  694.             position: absolute;
  695.             height: 0px;
  696.             width: 60px;
  697.             top: 60px;
  698.             background-color: #212121;
  699.             top: 30px;
  700.             -webkit-transform: rotateZ(90deg);
  701.             transform: rotateZ(90deg);
  702.             -webkit-transform-origin: 30px 30px;
  703.             -ms-transform-origin: 30px 30px;
  704.             transform-origin: 30px 30px;
  705.         }
  706.         .navToggle9 .icon:before
  707.         {
  708.             -webkit-transition-duration: 0.5s;
  709.             transition-duration: 0.5s;
  710.             position: absolute;
  711.             width: 30px;
  712.             height: 60px;
  713.             background-color: #212121;
  714.             content: "";
  715.             top: 20px;
  716.             top:;
  717.         }
  718.         .navToggle9 .icon:after
  719.         {
  720.             -webkit-transition-duration: 0.5s;
  721.             transition-duration: 0.5s;
  722.             position: absolute;
  723.             width: 30px;
  724.             height: 60px;
  725.             background-color: #212121;
  726.             content: "";
  727.             top: 20px;
  728.             top:;
  729.             left: 30px;
  730.         }
  731.         .navToggle9 .icon:hover
  732.         {
  733.             cursor: pointer;
  734.         }
  735.         .navToggle9.open .icon
  736.         {
  737.             -webkit-transition: all 0.5s;
  738.             transition: all 0.5s;
  739.             -webkit-transform: rotateZ(0deg);
  740.             transform: rotateZ(0deg);
  741.         }
  742.         .navToggle9.open .icon:before
  743.         {
  744.             width: 22.5px;
  745.         }
  746.         .navToggle9.open .icon:after
  747.         {
  748.             -webkit-transform-origin: 30px 60px;
  749.             -ms-transform-origin: 30px 60px;
  750.             transform-origin: 30px 60px;
  751.             -webkit-transform: scaleX(0.75);
  752.             -ms-transform: scaleX(0.75);
  753.             transform: scaleX(0.75);
  754.         }
  755.         .navToggle9.play .icon
  756.         {
  757.             -webkit-transition: all 0.5s;
  758.             transition: all 0.5s;
  759.             -webkit-transform: rotateZ(0deg);
  760.             transform: rotateZ(0deg);
  761.         }
  762.         .navToggle9.play .icon:before
  763.         {
  764.             width: 500px;
  765.         }
  766.         .navToggle9.play .icon:after
  767.         {
  768.             -webkit-transform-origin: 30px 60px;
  769.             -ms-transform-origin: 30px 60px;
  770.             transform-origin: 30px 60px;
  771.             -webkit-transform: scaleX(2);
  772.             -ms-transform: scaleX(2);
  773.             transform: scaleX(2);
  774.         }
  775.  
  776.         .navToggle10
  777.         {
  778.             position: absolute;
  779.             width: 60px;
  780.             height: 120px;
  781.             top: 300px;
  782.             left: 120px;
  783.             -webkit-transition-duration: 0.5s;
  784.             transition-duration: 0.5s;
  785.         }
  786.         .navToggle10 .icon
  787.         {
  788.             -webkit-transition-duration: 0.5s;
  789.             transition-duration: 0.5s;
  790.             position: absolute;
  791.             height: 8px;
  792.             width: 60px;
  793.             top: 60px;
  794.             background-color: #212121;
  795.         }
  796.         .navToggle10 .icon:before
  797.         {
  798.             -webkit-transition-duration: 0.5s;
  799.             transition-duration: 0.5s;
  800.             position: absolute;
  801.             width: 60px;
  802.             height: 8px;
  803.             background-color: #212121;
  804.             content: "";
  805.             top: -20px;
  806.         }
  807.         .navToggle10 .icon:after
  808.         {
  809.             -webkit-transition-duration: 0.5s;
  810.             transition-duration: 0.5s;
  811.             position: absolute;
  812.             width: 60px;
  813.             height: 8px;
  814.             background-color: #212121;
  815.             content: "";
  816.             top: 20px;
  817.         }
  818.         .navToggle10 .icon:hover
  819.         {
  820.             cursor: pointer;
  821.         }
  822.         .navToggle10.open .icon
  823.         {
  824.             -webkit-transition-duration: 0.5s;
  825.             transition-duration: 0.5s;
  826.             -webkit-transform: rotateZ(-180deg);
  827.             transform: rotateZ(-180deg);
  828.         }
  829.         .navToggle10.open .icon:before
  830.         {
  831.             -webkit-transform: rotateZ(-45deg) scaleX(0.75) translate(-20px, -6px);
  832.             transform: rotateZ(-45deg) scaleX(0.75) translate(-20px, -6px);
  833.         }
  834.         .navToggle10.open .icon:after
  835.         {
  836.             -webkit-transform: rotateZ(45deg) scaleX(0.75) translate(-20px, 6px);
  837.             transform: rotateZ(45deg) scaleX(0.75) translate(-20px, 6px);
  838.         }
  839.  
  840.         .navToggle11
  841.         {
  842.             position: absolute;
  843.             width: 60px;
  844.             height: 120px;
  845.             top: 300px;
  846.             left: 240px;
  847.             -webkit-transition-duration: 0.5s;
  848.             transition-duration: 0.5s;
  849.         }
  850.         .navToggle11 .icon-left
  851.         {
  852.             -webkit-transition-duration: 0.5s;
  853.             transition-duration: 0.5s;
  854.             position: absolute;
  855.             height: 4px;
  856.             width: 15px;
  857.             top: 60px;
  858.             background-color: #212121;
  859.         }
  860.         .navToggle11 .icon-left:before
  861.         {
  862.             -webkit-transition-duration: 0.5s;
  863.             transition-duration: 0.5s;
  864.             position: absolute;
  865.             width: 15px;
  866.             height: 4px;
  867.             background-color: #212121;
  868.             content: "";
  869.             top: -10px;
  870.         }
  871.         .navToggle11 .icon-left:after
  872.         {
  873.             -webkit-transition-duration: 0.5s;
  874.             transition-duration: 0.5s;
  875.             position: absolute;
  876.             width: 15px;
  877.             height: 4px;
  878.             background-color: #212121;
  879.             content: "";
  880.             top: 10px;
  881.         }
  882.         .navToggle11 .icon-left:hover
  883.         {
  884.             cursor: pointer;
  885.         }
  886.         .navToggle11 .icon-right
  887.         {
  888.             -webkit-transition-duration: 0.5s;
  889.             transition-duration: 0.5s;
  890.             position: absolute;
  891.             height: 4px;
  892.             width: 15px;
  893.             top: 60px;
  894.             background-color: #212121;
  895.             left: 15px;
  896.         }
  897.         .navToggle11 .icon-right:before
  898.         {
  899.             -webkit-transition-duration: 0.5s;
  900.             transition-duration: 0.5s;
  901.             position: absolute;
  902.             width: 15px;
  903.             height: 4px;
  904.             background-color: #212121;
  905.             content: "";
  906.             top: -10px;
  907.         }
  908.         .navToggle11 .icon-right:after
  909.         {
  910.             -webkit-transition-duration: 0.5s;
  911.             transition-duration: 0.5s;
  912.             position: absolute;
  913.             width: 15px;
  914.             height: 4px;
  915.             background-color: #212121;
  916.             content: "";
  917.             top: 10px;
  918.         }
  919.         .navToggle11 .icon-right:hover
  920.         {
  921.             cursor: pointer;
  922.         }
  923.         .navToggle11.open .icon-left
  924.         {
  925.             -webkit-transition-duration: 0.5s;
  926.             transition-duration: 0.5s;
  927.             background: transparent;
  928.         }
  929.         .navToggle11.open .icon-left:before
  930.         {
  931.             -webkit-transform: rotateZ(45deg) scaleX(1.4) translate(2px, 2px);
  932.             transform: rotateZ(45deg) scaleX(1.4) translate(2px, 2px);
  933.         }
  934.         .navToggle11.open .icon-left:after
  935.         {
  936.             -webkit-transform: rotateZ(-45deg) scaleX(1.4) translate(2px, -2px);
  937.             transform: rotateZ(-45deg) scaleX(1.4) translate(2px, -2px);
  938.         }
  939.         .navToggle11.open .icon-right
  940.         {
  941.             -webkit-transition-duration: 0.5s;
  942.             transition-duration: 0.5s;
  943.             background: transparent;
  944.         }
  945.         .navToggle11.open .icon-right:before
  946.         {
  947.             -webkit-transform: rotateZ(-45deg) scaleX(1.4) translate(-2px, 2px);
  948.             transform: rotateZ(-45deg) scaleX(1.4) translate(-2px, 2px);
  949.         }
  950.         .navToggle11.open .icon-right:after
  951.         {
  952.             -webkit-transform: rotateZ(45deg) scaleX(1.4) translate(-2px, -2px);
  953.             transform: rotateZ(45deg) scaleX(1.4) translate(-2px, -2px);
  954.         }
  955.  
  956.         .navToggle12
  957.         {
  958.             position: absolute;
  959.             width: 60px;
  960.             height: 120px;
  961.             top: 300px;
  962.             left: 315px;
  963.             -webkit-transition-duration: 0.5s;
  964.             transition-duration: 0.5s;
  965.         }
  966.         .navToggle12 .icon
  967.         {
  968.             -webkit-transition-duration: 0.5s;
  969.             transition-duration: 0.5s;
  970.             position: absolute;
  971.             height: 4px;
  972.             width: 30px;
  973.             top: 60px;
  974.             background-color: #212121;
  975.         }
  976.         .navToggle12 .icon:before
  977.         {
  978.             -webkit-transition-duration: 0.5s;
  979.             transition-duration: 0.5s;
  980.             position: absolute;
  981.             width: 30px;
  982.             height: 4px;
  983.             background-color: #212121;
  984.             content: "";
  985.             top: -10px;
  986.         }
  987.         .navToggle12 .icon:after
  988.         {
  989.             -webkit-transition-duration: 0.5s;
  990.             transition-duration: 0.5s;
  991.             position: absolute;
  992.             width: 30px;
  993.             height: 4px;
  994.             background-color: #212121;
  995.             content: "";
  996.             top: 10px;
  997.         }
  998.         .navToggle12 .icon:hover
  999.         {
  1000.             cursor: pointer;
  1001.         }
  1002.         .navToggle12.open .icon
  1003.         {
  1004.             -webkit-transition-duration: 0.5s;
  1005.             transition-duration: 0.5s;
  1006.             background: transparent;
  1007.         }
  1008.         .navToggle12.open .icon:before
  1009.         {
  1010.             -webkit-transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px);
  1011.             transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px);
  1012.         }
  1013.         .navToggle12.open .icon:after
  1014.         {
  1015.             -webkit-transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px);
  1016.             transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px);
  1017.         }
  1018.  
  1019.         .navToggle13
  1020.         {
  1021.             position: absolute;
  1022.             width: 60px;
  1023.             height: 120px;
  1024.             top: 300px;
  1025.             left: 390px;
  1026.             -webkit-transition-duration: 0.5s;
  1027.             transition-duration: 0.5s;
  1028.         }
  1029.         .navToggle13 .icon
  1030.         {
  1031.             -webkit-transition-duration: 0.5s;
  1032.             transition-duration: 0.5s;
  1033.             position: absolute;
  1034.             height: 4px;
  1035.             width: 30px;
  1036.             top: 60px;
  1037.             background-color: #212121;
  1038.         }
  1039.         .navToggle13 .icon:before
  1040.         {
  1041.             -webkit-transition-duration: 0.5s;
  1042.             transition-duration: 0.5s;
  1043.             position: absolute;
  1044.             width: 30px;
  1045.             height: 4px;
  1046.             background-color: #212121;
  1047.             content: "";
  1048.             top: -10px;
  1049.         }
  1050.         .navToggle13 .icon:after
  1051.         {
  1052.             -webkit-transition-duration: 0.5s;
  1053.             transition-duration: 0.5s;
  1054.             position: absolute;
  1055.             width: 30px;
  1056.             height: 4px;
  1057.             background-color: #212121;
  1058.             content: "";
  1059.             top: 10px;
  1060.         }
  1061.         .navToggle13 .icon:hover
  1062.         {
  1063.             cursor: pointer;
  1064.         }
  1065.         .navToggle13.open .icon
  1066.         {
  1067.             -webkit-transition: 0.5s;
  1068.             transition: 0.5s;
  1069.         }
  1070.         .navToggle13.open .icon:before
  1071.         {
  1072.             -webkit-transform: rotateZ(-45deg) scaleX(0.75) translate(-10px, -3px);
  1073.             transform: rotateZ(-45deg) scaleX(0.75) translate(-10px, -3px);
  1074.         }
  1075.         .navToggle13.open .icon:after
  1076.         {
  1077.             -webkit-transform: rotateZ(45deg) scaleX(0.75) translate(-10px, 3px);
  1078.             transform: rotateZ(45deg) scaleX(0.75) translate(-10px, 3px);
  1079.         }

js代码：

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

            $(this).toggleClass("open");

        });

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

            $(this).toggleClass("open");

        });

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

            $(this).toggleClass("open");

        });

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

            $(this).toggleClass("open");

        });

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

            $(this).toggleClass("open");

        });

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

            $(this).toggleClass("open");

        });

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

            $(this).toggleClass("open");

        });

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

            $(this).toggleClass("open");

        });

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

            $(this).toggleClass("open");

        });

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

            $(this).toggleClass("open");

        });

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

            $(this).toggleClass("open");

        });

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

            $(this).toggleClass("open");

        });

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

            $(this).toggleClass("open");

        });

注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/9330

4款基于jquery的列表图标动画切换特效的更多相关文章

  1. 一款基于jquery超炫的图片切换特效

    今天为给大家介绍一款基于jquery超炫的图片切换特效.由百叶窗飞入显示图片.图片消息的时候也是百叶窗渐行渐远.用于图片展示,效果还是非常好,我们一起看下效果图: 在线预览   源码下载 来看下实现的 ...

  2. 10款基于jquery的web前端动画特效

    1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...

  3. 一款基于jquery和css3的头像恶搞特效

    今天给大家分享一款基于jquery和css3的头像恶搞特效.这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子.效果图如下: 在线预览   源码下载 实现的代 ...

  4. 基于jQuery图片遮罩滑动文字切换特效

    基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  5. 8款基于Jquery的WEB前端动画特效

    1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的是30个超炫酷的jQuery悬停按钮动画,当我们将鼠标滑过按钮 ...

  6. 一款基于jQuery的超酷动画幻灯片

    今天给大家带来一款仿步步高vivo手机网站的一款首页焦点幻灯展示特效,带有超酷炫的动画特效,动态效果丝毫不逊色于flash动画,具有很强的视觉冲击力,推荐下载学习! 提示:兼容360.FireFox. ...

  7. 基于jQuery 3D旋转明星人物展示特效

    分享一款基于jQuery 3D旋转明星人物展示特效.这是一款来自百度换肤活动的明星旋转展示效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  8. 10款基于jquery实现的超酷动画源码

    1.jQuery二级下拉菜单 下拉箭头翻转动画 之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款j ...

  9. 一款基于jquery ui的动画提交表单

    今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览   源码下载 实现的代码. html代码: & ...

随机推荐

  1. Java IO 要点总结

    Java 流在处理上分为字符流和字节流.字符流处理的单元为 2 个字节的 Unicode 字符,分别操作字符.字符数组或字符串,而字节流处理单元为 1 个字节,操作字节和字节数组. Java 内用 U ...

  2. Maven 向私服nexus上传jar

    1. 单个jar上上传 方法一:利用界面(省略) 方法二:利用命令行: 1). 安装到本地库:mvn install:install-file -DgroupId=org.apache.hadoop ...

  3. MySQL JOIN操作报错问题小解

    1 问题描述 在调用一个MySQL存储过程的时候,有时候会出现下面的错误: Illigal mix of collations(gbk\_chinese\_ci, IMPLICIT) and (lat ...

  4. 主流ETL(Extract-Transform-Load)工具选型，Kettle Spoon、Datastage、Powercenter介绍

    参考:三大主流ETL工具选型 ETL工具 Kettle Spoon 开源ETL工具,所以免费,用java开发的. Ascential公司的Datastage(在2005年被IBM收购现在是 IBM 的 ...

  5. window下删除所有带.svn文件夹及文件，删除所有的.svn文件夹

    (一)------------------------------------------------------------------------------------------------- ...

  6. Java虚拟机学习 - 查看JVM参数及值的命令行工具（6）

    查看JVM各个参数值方式 1. HotSpot vm中的各个globals.hpp文件  查看jvm初始的默认值及参数 globals.hpp globals_extension.hpp c1_glo ...

  7. POJ 3691 DNA repair （DP+AC自动机）

    DNA repair Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 4815   Accepted: 2237 Descri ...

  8. Python学习笔记015——文件file的常规操作（二进制文件）

    有时候诸如图片.音乐等信息不是以文本的形式存储的,而是二进制文件格式存储的. 有时候很多信息不是以文本文件的形式存储的 很多时候,都需要用到二进制读取文件.毕竟很多信息不是以文本的形式存储.例如:图片 ...

  9. RMAN备份时报“ORA-19504: failed to create file”和“ORA-27038: created file already exists”

    RMAN> run { > allocate channel ch00 type disk; > backup format '/dbbackup/db_%T' database; ...

  10. Unix环境高级编程(二十一)数据库函数库

    本章的内容是开发一个简单的.多用户数据库的C函数库.调用此函数库提供的C语言函数,其他程序可以读取和存储数据库中的记录.绝大部分商用数据库函数库提供多进程同时更新数据库所需要的并发控制,采用建议记录锁 ...