溢出插入？

Question

我们有一个正常的overflow规则，可以阻止在容器外部显示内容，但是，我想知道制作某种overflow: inset样式的方法是什么？

我的意思是，例如，一个形状像三角形的:before元素从容器下面动画（向下滑动），然后动画回来（向上滑动），但三角形的部分在容器变得隐藏，而不在其下的部分仍然可见。

示例用例：矩形是半透明容器

Answer 1

我相信这就是你想要的。基本上需要一个包装盒周围的包装器，使用overflow: hidden;向上滑动，以便在它滑出原始盒子时停止显示。

＆＃13;

＆＃13;

#red {
  width: 100px;
  height: 100px;
  background: rgba(255, 0, 0, 0.5);
}
#green-wrapper {
  overflow: hidden;
  width: 100px;
  height: 50px;
  position: relative;
}
#green {
  width: 100%;
  height: 100%;
  background: green;
  position: absolute;
  animation: up-and-down 2s linear infinite;
}
@keyframes up-and-down {
  0% {
    bottom: 0;
  }
  50% {
    bottom: 100%;
  }
  100% {
    bottom: 0;
  }
}

＆＃13;

<div id="red"></div>
<div id="green-wrapper">
  <div id="green"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

也许尝试这个，我在几个项目中使用过。

@keyframes overflowTransition {
  0% {
    overflow: hidden;
  }
  100% {
    overflow: visible;
  }
}

.container {
  animation-name: overflowTransition;
  animation-duration: 400ms;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}