（转）点击按钮向左侧滑动效果（Drawer 抽屉）

最新推荐文章于 2024-08-09 10:57:20 发布

CaseyWei

最新推荐文章于 2024-08-09 10:57:20 发布

阅读量1.6k

点赞数 1

分类专栏： HTML CSS

本文链接：https://blog.csdn.net/caseywei/article/details/123892144

版权

CSS3 动画效果向左滑动原生实现按钮交互

关键词由CSDN通过智能技术生成

CSS 同时被 2 个专栏收录

81 篇文章 5 订阅

订阅专栏

HTML

42 篇文章 0 订阅

订阅专栏

平时都是使用ui组件库里的轮子实现动效，古老项目需要原生实现一下，记录一下。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>向左侧滑动效果</title>

<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

<style>
*{undefined
margin: 0;
padding: 0;
}
img{undefined
border: 0;
}
li{undefined
list-style: none;
}
a{undefined
text-decoration: none;
}


.btn{undefined
width: 100px;
height: 30px;
line-height: 30px;
border: 1px solid;
margin: 0 auto;
margin-top: 100px;
text-align: center;
cursor: pointer;
border-radius: 6px;
}
.btn_show{undefined
width: 100%;
height: 100%;
display: none;
}


.btn_show_bg{undefined
width: 100%;
height: 100%;
background: #000;
position: fixed;
top: 0;
left: 0;
opacity: 0.5;
}
.btn_show_main{undefined
width: 300px;
height: 100%;
background: #fff;
position: fixed;
top: 0;
right: -300px;
}
.btn_show_main_close{undefined
font-size: 14px;
width: 100px;
height: 20px;
line-height: 20px;
text-align: center;
cursor: pointer;
}

.div_right0{undefined
animation:myfirstss 2s;
-moz-animation:myfirstss 2s; /* Firefox */
-webkit-animation:myfirstss 2s; /* Safari and Chrome */
-o-animation:myfirstss 2s; /* Opera */
animation-fill-mode: forwards;
}
@keyframes myfirstss{undefined
100% {background:red; right:0px; top:0px;}
}
.div_right{undefined
animation:myfirsts 2s;
-moz-animation:myfirsts 2s; /* Firefox */
-webkit-animation:myfirsts 2s; /* Safari and Chrome */
-o-animation:myfirsts 2s; /* Opera */
animation-fill-mode: forwards;
right: 0px;
}
@keyframes myfirsts{undefined
100% {background:blue; right:-300px; top:0px;}
}
.btn_show_main ul li{undefined
width: 100%;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 14px;
margin-bottom: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="btn">按钮</div>

<div class="btn_show">
<div class="btn_show_bg"></div>
<div class="btn_show_main">
<div class="btn_show_main_close">我是关闭</div>
<ul>
<li>我是1</li>
<li>我是2</li>
<li>我是3</li>
<li>我是4</li>
<li>我是5</li>
<li>我是6</li>
<li>我是7</li>
<li>我是8</li>
<li>我是9</li>
<li>我是10</li>
</ul>
</div>
</div>
</body>
<script>
window.onload = function(){undefined
    $(".btn").click(function(){undefined
        $(".btn_show").show();
        $(".btn_show_bg").show();
        $(".btn_show_main").addClass('div_right0');
        $(".btn_show_main").removeClass('div_right')
    });

    $(".btn_show_main_close").click(function(){undefined
        $(".btn_show_main").addClass('div_right');
        $(".btn_show_main").removeClass('div_right0');
        $(".btn_show_bg").hide(2000);
    });
};

</script>
</html>

链接：点击按钮向左侧滑动效果_☞小阿平☜的博客-CSDN博客_css3 向左滑动