菜单从左侧飞入页中

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

菜单从左侧飞入页中。菜单从左侧飞入页中。Animate

body{text-align: center;}ul{width: 400px;padding: 0;margin: 0 auto;}ul.animate li{transform: translate;}ul.animate li:nth-of-type{transition-delay: 0.05s;}ul.animate li:nth-of-type{transition-delay: 0.1s;}ul.animate li:nth-of-type{transition-delay: 0.15s;}ul.animate li:nth-of-type{transition-delay: 0.2s;}ul.animate li:nth-of-type{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;transition: transform 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.08);}li:nth-of-type{transition-delay: 0.15s;}li:nth-of-type{transition-delay: 0.3s;}li:nth-of-type{transition-delay: 0.45s;}li:nth-of-type{transition-delay: 0.6s;}li:nth-of-type{transition-delay: 0.75s;}button{padding: 12px 18px;border: none;border-radius: 3px;color: #fff;background: #7DBED8;}button:focus{outline: none;}
  • First
  • Second
  • Third
  • Fourth
  • Fifth

相关文章