溢出插入?

时间:2017-01-19 14:34:50

标签: html css

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

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

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

2 个答案:

答案 0 :(得分:1)

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



#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;
  }
}

<div id="red"></div>
<div id="green-wrapper">
  <div id="green"></div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

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

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

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