Html 溢出插入？

我们有一个正常的

溢出

规则，防止容器外的东西可见，但是，我想知道有什么方法可以制作一种

溢出：插入

样式

我的意思是，例如，一个

：形状像三角形的元素之前，从容器下方（向下滑动）设置动画，然后向上（向上滑动）设置动画，但是容器下方的三角形部分被隐藏，而不在容器下方的部分仍然可见

示例用例：矩形是半透明的容器
也许可以试试这个，我在少数项目中使用过

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

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

我相信这就是你想要的。基本上需要一个包装盒，它可以随着
overflow:hidden向上滑动以在其滑出原始框时停止显示


#红色{
宽度：100px；
高度：100px；
背景：rgba（255,0,0,0.5）；
}
#绿色包装{
溢出：隐藏；
宽度：100px；
高度：50px；
位置：相对位置；
}
#绿色的{
宽度：100%；
身高：100%；
背景：绿色；
位置：绝对位置；
动画：上下2s线性无限；
}
@上下关键帧{
0% {
底部：0；
}
50% {
底部：100%；
}
100% {
底部：0；
}
}

您在找这样的东西吗：？我本来想回答的，但我不是100%你想要的。@Aeolingamenfel不。如果在红色矩形上将alpha通道值设置为小于1，则会看到绿色框。我需要把绿色的盒子藏起来。像剪贴效果或短信我不太确定我是否理解。绿色的盒子真的隐藏了吗？你的意思是说如果它从红色框中消失，则隐藏？如果你将红色矩形的不透明度更改为例如
0.5
，你将看到当绿色矩形位于红色矩形下时，它是可见的。我想要的是隐藏在红色矩形下的绿色矩形部分。是的，想想这个。我会接受这个答案，因为这是可行的，但我认为你应该补充一点，在现实生活中，
红色
和
绿色包装
很可能被包装在
包装
中。然而，在我的例子中，真正的效果是通过使用
scale（）
和更改
transform origin
实现的。仍然感谢您的选择。：）这仍然会使移动元素的一部分在其设置动画时可见。