手机网站建设价格,seo数据优化教程,给自己的爱人做网站,微信小程序打不开效果预览 技术要点 实现思路
元素固定布局#xff08;fixed#xff09;在窗口最右侧外部js 定时器改变元素的 right 属性#xff0c;控制元素移入#xff0c;移出
过渡动画 transition
transition: 过渡的属性 过渡的持续时间 过渡时间函数 延迟时间此处改变的是 right … 效果预览 技术要点 实现思路
元素固定布局fixed在窗口最右侧外部js 定时器改变元素的 right 属性控制元素移入移出
过渡动画 transition
transition: 过渡的属性 过渡的持续时间 过渡时间函数 延迟时间此处改变的是 right 属性过渡动画的写法为
transition: right 0.3s;盒模型
推荐用 IE 盒模型方便控制元素的定位避免添加 padding 后的误判。 代码实现 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleCSS 抽屉/titlestyle#drawer-container {background-color: rgb(51, 172, 242);color: white;padding: 10px;box-sizing: border-box;width: 300px;height: 100%;position: fixed;right: -300px;top: 0;transition: right 0.3s;}/style/headbodydiv iddrawer-container抽屉里的内容/divscriptconst drawerContainer document.getElementById(drawer-container);setTimeout(() {drawerContainer.style.right 0px;}, 1000);setTimeout(() {drawerContainer.style.right -300px;}, 3000);/script/body
/html
