时间戳

首页 > 解决方案 > 如何隐藏延伸到其容器之外的元素？

html - 如何隐藏延伸到其容器之外的元素？

问题描述

我有一个动画蓝色框，它应该来自右侧并输入其父 div。我试图找出一种方法使该框在进入父 div 之前不可见。最外层的 div（灰色）由框架控制，因此基本上无法访问。

.outer-div-no-access {
  background: gray;
  position:relative;
  height:100vh;
  padding: 10px;
}

.parent-div {
  position: relative;
  background-color: yellow;
  border: 2px solid green;
  height: 200px;
  width: 50%;
}

.child-div {
  position: relative;
  height: 25%;
  background-color: lightblue;
  animation-name: example;
  animation-duration: 2s;
  left: 25%;
}


@keyframes example {
    from {
        left: 100%;
    }
    to {
        left: 25%;
    }
}
<html>
<body>
   <div class="outer-div-no-access">
      <div class="parent-div">
        <div class="child-div">

        </div>
      </div>
   </div>
</body>
 
</html>

标签： htmlcss

解决方案

在父级上使用溢出：隐藏：

.outer-div-no-access {
  background: gray;
  position:relative;
  height:100vh;
  padding: 10px;
}

.parent-div {
  overflow: hidden;
  position: relative;
  background-color: yellow;
  border: 2px solid green;
  height: 200px;
  width: 50%;
}

.child-div {
  position: relative;
  height: 25%;
  background-color: lightblue;
  animation-name: example;
  animation-duration: 2s;
  left: 25%;
}


@keyframes example {
    from {
        left: 100%;
    }
    to {
        left: 25%;
    }
}
<html>
<body>
   <div class="outer-div-no-access">
      <div class="parent-div">
        <div class="child-div">

        </div>
      </div>
   </div>
</body>
 
</html>

推荐阅读