0
点赞
收藏
分享

微信扫一扫

计算机视觉中,数据增强和扩充数据集规模的区别是什么?

心如止水_c736 2024-06-23 阅读 25
css前端

在这里插入图片描述

实现思路

  • 元素固定布局(fixed)在窗口最右侧外部
  • js 定时器改变元素的 right 属性,控制元素移入,移出

过渡动画 transition

transition: 过渡的属性 过渡的持续时间 过渡时间函数 延迟时间

此处改变的是 right 属性,过渡动画的写法为

transition: right 0.3s;

盒模型

推荐用 IE 盒模型,方便控制元素的定位,避免添加 padding 后的误判。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS 抽屉</title>
    <style>
      #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>
  </head>
  <body>
    <div id="drawer-container">抽屉里的内容</div>

    <script>
      const drawerContainer = document.getElementById("drawer-container");

      setTimeout(() => {
        drawerContainer.style.right = "0px";
      }, 1000);

      setTimeout(() => {
        drawerContainer.style.right = "-300px";
      }, 3000);
    </script>
  </body>
</html>

举报

相关推荐

0 条评论