我们有一个正常的overflow
规则,可以阻止在容器外部显示内容,但是,我想知道制作某种overflow: inset
样式的方法是什么?
我的意思是,例如,一个形状像三角形的:before
元素从容器下面动画(向下滑动),然后动画回来(向上滑动),但三角形的部分在容器变得隐藏,而不在其下的部分仍然可见。
示例用例:矩形是半透明容器
答案 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;
答案 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;
}