js实现左侧弹出效果
2021-01-23 22:13
YPE html>
标签：round 特效 orm point foo fixed height pad name
.header .btn-slide-bar{
width: 44px;
height: 44px;
float: left;
cursor: pointer;
line-height: 2.8;
}
/*三道横杠::before加box-shadow实现*/
.header .btn-slide-bar::before{
content: "";
width: 20px;
height: 2px;
background-color: #999;
display: inline-block;
box-shadow: 0 7px 0 #999, 0 -7px 0 #999;
}
.wraper-page{
position: absolute;
top:44px;
right: 0;
bottom: 44px;
left: 0;
overflow: hidden;
}
.slide-bar{
position: absolute;
top: 0px;
bottom: 0px;
background-color: #333;
width: 150px;
left: 0;
z-index: 2;
transform: translate3d(-150px,0,0);
transition: all 0.2s ease-in-out;
height: 500px;
}
.slide-bar li{
padding-left: 10px;
height: 40px;
line-height: 40px;
text-align: left;
color: #fff;
border-bottom: 1px solid #222;
}