一个简单的移动端抽屉式菜单动画css3动画

&emsp;&emsp;移动端菜单具体如何显示，我觉得还是抽屉式菜单弹出比较好看，具体怎么用css来控制，下面来演示给大家。

```
<!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>
    * {
        margin: 0;
        padding: 0;
    }

.menu {
        width: 500px;
        height: 100vh;
        background-color: rebeccapurple;
        transform: translate(-500px);
        transition: all .3s ease-out;
    }

.show {
        transform: translate(-0px);
    }

.btn {
        position: fixed;
        top: 15px;
        right: 5px;
    }
</style>

<body>

</div>
</body>
<script src="https://cdn.micuer.com/static/js/jquery.min.js"></script>
<script>
    function test() {
        $('.menu').toggleClass('show')
    }
</script>

</html>
```

其实代码汉简单，大家看了也就知道了，简单说一下原理吧。
menu中的样式是这样

transform: translate(-500px);
        transition: all .3s ease-out;
		
通过js给menu重写样式

transform: translate(-0px);

就达到了简单的动画效果。

在线预览地址：
https://micuu.com/html/menu.html

刚点击去是一片空白，按钮在右上角哦，记得点击。

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

一个简单的移动端抽屉式菜单动画css3动画

留言反馈