css

下滑页面

来源于:

https://siitake.cn/tools/fullScreenMenu/

单击按钮,下滑一个覆盖页面。

源代码如下:

<!DOCTYPE html>
<html>
<head>
<title>fullScreenMenu</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#woShiCaiDan {
position: fixed;
top: -100vh;
left: 0;
width: 100vw;
height: 100vh;
background-color: skyblue;
transition: top .3s;
}
.open {
top: 0!important;
}
#woShiAnNiu {
position: fixed;
top: 100px;
right: 100px;
display: block;
border: 1px solid black;
border-radius: 3px;
width: 60px;
height: 30px;
line-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<div id="woShiCaiDan"></div>
<span id="woShiAnNiu" onclick="qieHuanCaiDan()">MENU</span>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var qieHuanCaiDan = function() {
$("#woShiCaiDan").toggleClass("open");
}
</script>
</body>
</html>

2018-11-02
css

CSS 参考手册

2018-11-1 21:01:14

css

CSS3实现伪类hover离开时平滑过渡效果

2018-11-3 6:02:25

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
若您的权利被侵害,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索