今天给大家分享一款基jquery超炫的动画导航菜单。这款导航菜单，初始时页面中间一个按钮，单击按钮，菜单从左侧飞入页中。再次单击按钮，导航飞入左侧消息。动画效果很非常炫。一起看下效果图：

   

实现的代码。

html代码：

     
        
      
First
        
      
Second
        
      
Third
        
      
Fourth
        
      
Fifth
    
     
            Animate        

css代码：

body        {
               text-align: center;        }                ul        {
               width: 400px;            padding: 0;            margin: 0 auto;        }        ul.animate li        {
               transform: translate(0);        }        ul.animate li:nth-of-type(1)        {
               transition-delay: 0.05s;        }        ul.animate li:nth-of-type(2)        {
               transition-delay: 0.1s;        }        ul.animate li:nth-of-type(3)        {
               transition-delay: 0.15s;        }        ul.animate li:nth-of-type(4)        {
               transition-delay: 0.2s;        }        ul.animate li:nth-of-type(5)        {
               transition-delay: 0.25s;        }                li        {
               list-style: none;            display: block;            padding: 20px;            margin: 12px 0;            border-radius: 5px;            font-family: Helvetica, sans-serif;            color: #fff;            background: #8DE48D;            transform: translate(-500%);            transition: transform 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.08);        }        li:nth-of-type(5)        {
               transition-delay: 0.15s;        }        li:nth-of-type(4)        {
               transition-delay: 0.3s;        }        li:nth-of-type(3)        {
               transition-delay: 0.45s;        }        li:nth-of-type(2)        {
               transition-delay: 0.6s;        }        li:nth-of-type(1)        {
               transition-delay: 0.75s;        }                button        {
               padding: 12px 18px;            border: none;            border-radius: 3px;            color: #fff;            background: #7DBED8;        }        button:focus        {
               outline: none;        }

注：本文原创文章，转载请注明原文地址：