首页IT科技js实现抽屉上拉下拉效果(CSS实现从下至上弹出的抽屉动画)

js实现抽屉上拉下拉效果(CSS实现从下至上弹出的抽屉动画)

时间2025-07-14 05:14:01分类IT科技浏览6262
导读:<!DOCTYPE html> <html>...

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <style> .container { margin: auto; top: 460px; width: 320px; height: 30px; position: relative; background-color: rgba(0, 0, 0, 0.4); overflow-y: auto; scroll-behavior: smooth; border-radius: 20px; } /* 隐藏滚动条 */ ::-webkit-scrollbar { display: none; } .expend { animation: expend ease 1s forwards; } .close-container { animation: no-expend ease 1s forwards; } @keyframes expend { from { top: 460px; height: 30px; } to { height: 330px; top: 160px; } } @keyframes no-expend { from { height: 330px; top: 160px; } to { top: 460px; height: 30px; } } .close { color: aliceblue; right: 0; margin: 5px 10px; position: absolute; } .title { color: aliceblue; height: 30px; line-height: 30px; margin: 0 10px; position: absolute; } .list { display: flex; /* 子元素换行 */ flex-wrap: wrap; white-space: nowrap; padding-top: 24px; } .item { width: 80px; height: 80px; margin: 40px; display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .item-img { width: 40px; height: 40px; } </style> </head> <body> <div class=container id=container> <div class=title>抽屉标题</div> <div class=close onclick=closeHandle()></div> <div class=list> <div class=item> <img src="./Icon_template.png" class="item-img"> <span class=item-text>内容1</span> </div> <div class=item> <img src="./Icon_template.png" class="item-img"> <span class=item-text>内容2</span> </div> <div class=item> <img src="./Icon_template.png" class="item-img"> <span class=item-text>内容3</span> </div> <div class=item> <img src="./Icon_template.png" class="item-img"> <span class=item-text>内容4</span> </div> <div class=item> <img src="./Icon_template.png" class="item-img"> <span class=item-text>内容4</span> </div> </div> </div> <script> const closeHandle = () => { console.log(关闭和展开); const dom = document.getElementById(container); const closeDom = document.getElementsByClassName(close)[0]; if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) { dom.className = "container expend"; setTimeout(() => { closeDom.innerText = X }, 100) } else { dom.className = "container close-container"; setTimeout(() => { closeDom.innerText = }, 100) } } </script> </body> </html>
声明:本站所有文章                ,如无特殊说明或标注                        ,均为本站原创发布                。任何个人或组织        ,在未征得本站同意时        ,禁止复制                、盗用                        、采集        、发布本站内容到任何网站                、书籍等各类媒体平台                        。如若本站内容侵犯了原著者的合法权益                        ,可联系我们进行处理        。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
mac随航功能用不了(macOS10.15怎么连接和操作 随航使用方法及支持设备一览) seo快速排名实例(揭秘SEO快速排名:背后的真相与策略)