前端特效：导航、个人中心滑出（左滑、右滑、上滑、下滑）效果实现

欧阳锋 · 发表于 2023-6-16 14:19:37

前段时间做到微信开发，需要实现个人中心滑出效果，今天稍有空闲，记录一下实现方式。

先来个效果图：

直接列出实现代码：

1.html

<div class="left_slide_center_nav">
<div class="center_mask"></div>
<div class="center_content">
</div>
</div>

复制代码

2.css

/**蒙层*/
.left_slide_center_nav .center_mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.6);
z-index: 1000;
display: none;
}
/**内容*/
.left_slide_center_nav .center_content {
position: fixed;
width: 79%;
top: 0;
bottom: 0;
transition: all .4s;
-moz-transition: all .4s;
-webkit-transition: all .4s;
-o-transition: all .4s;
-os-transition: all .4s;
z-index: 99999;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
overflow-y: scroll;
background: #fff;
-os-transform: translateX(-120%);
transform: translateX(-120%);
}
/**显示蒙层和内容使用父级.show样式控制*/
.left_slide_center_nav.show .center_mask {
display: block;
}
.left_slide_center_nav.show .center_content {
-os-transform: translateX(0);
transform: translateX(0);
}

复制代码

3.js控制样式切换，显示和隐藏

//显示：
$(".left_slide_center_nav").addClass("show");
//点击蒙层关闭：
$(".left_slide_center_nav").on("click",".center_mask",function(){
//隐藏：
$(".left_slide_center_nav").removeClass("show");
});

复制代码

注意重点：

1.初始样式中transform: translateX(-120%);的定义，以及show之后transform: translateX(0);的定义

2.父级别.show样式的控制

注：

如果需要右往左滑出，css中的代码 transform: translateX(-120%) 可改为 transform: translateX(120%);参数值可自行修改。

如果需要上往下，或者下往上滑出，可以使用transform: translateY(-120%); 或者transform: translateY(120%);

如果需要实现斜着滑，可以transform: translate(150%,150%);

其他的就各位举一反三吧。

		自动登录	找回密码
密码			会员注册

[CSS/Html] 前端特效：导航、个人中心滑出（左滑、右滑、上滑、下滑）效果实现

浏览过的版块

[CSS/Html] 前端特效：导航 、个人中心滑出（左滑、右滑、上滑、下滑）效果实现

浏览过的版块

[CSS/Html] 前端特效：导航、个人中心滑出（左滑、右滑、上滑、下滑）效果实现