css动画之移动端菜单切入动画效果菜单动画

最近想着优化网站的移动端效果，由于传统框架没有好的移动端菜单弹出效果，只有自己动手写了，下面分享一下demo。在线体验地址：

https://micuu.com/html/m-nav.html

https://micuu.com/html/m-nav2.html  单独将动画提出，不需要引用css动画文件

https://micuu.com/html/m-nav3.html  推荐使用,实现最为简洁

预览图效果：
![](https://micuu.com/data/avatar/20211021/97f44437b958da2b3e3be27a3f376a77.gif)

借助了jquery和Animate.css

具体的Animate.css使用方法可以参考：https://micuu.com/new/485.html

下面不多说直接上代码：
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>移动端菜单滑出滑入效果</title>
</head>
<style>
  body{
    padding:0;
    margin:0;
  }
  .mask{
    display: block;
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #0a0a0a;
    opacity: 0.3;
    z-index: 1;
  }
  .m-nav{
    display: block;
    position: fixed;
    background: pink;
    height:100vh;
    width:50%;
    z-index: 2;
  }
  #btn{
    position:absolute;
    top: 0;
    right: 0;
  }
  .none{
    display: none;
  }

</style>

</div>

<div class="content">
    最近想着优化网站的移动端效果，由于传统框架没有好的移动端菜单弹出效果，只有自己动手写了，下面分享一下demo。在线体验地址：
    https://cdn.micuer.com/html/m-nav.html

预览图效果：

借助了jquery和Animate.css

具体的Animate.css吃用方法可以参考：https://cdn.micuer.com/new/485.html

下面不多说直接上代码：
  </div>

/**
     * 控制菜单显隐
     */
    function toggleMnav(){
      $(".m-nav").removeClass('none')
      if( $(".m-nav").hasClass('fadeInLeft')){
        $(".m-nav").removeClass('fadeInLeft')
        $(".m-nav").addClass('fadeOutLeft')
        $(".mask").addClass('none')
      }else{
        $(".m-nav").removeClass('fadeOutLeft')
        $(".mask").removeClass('none')
        $(".m-nav").addClass('fadeInLeft')
      }
    }
      
  </script>

</body>
</html>
```

注:原创不易,转载请注明出处( https://micuu.com/new/2263.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。

css动画之移动端菜单切入动画效果菜单动画

留言反馈