溢出插入？

我们有一个正常的overflow规则，可以防止在容器外部看到东西，但是，我想知道做什么样的方法来创建一种overflow: inset样式？溢出插入？

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

实施例用例：矩形是半透明容器

来源

2017-01-19 Roland Jegorov

您正在寻找这样的事情：https://jsfiddle.net/7dnqour1/？我会回答这个问题，但我不是100％，这是你想要的。 – Aeolingamenfel

@Aeolingamenfel没有。如果在红色矩形上设置alpha通道值小于1，则会看到绿色框。我需要绿色的盒子隐藏起来。就像一个剪辑效果或smthing –

我不太确定我明白。绿箱确实隐藏了？如果它离开红色盒子，你的意思是隐藏吗？ – Aeolingamenfel

我相信这是你想要的。基本上需要一个围绕着盒子的包装纸，该盒子与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>

来源

2017-01-19 15:19:34

是的，想过这个。我会接受这个答案，因为这会起作用，但我认为你应该在现实生活中添加一个'red'和'green-wrapper'，很可能会被封装在一个'wrapper'中。然而，就我而言，真正的效果是通过使用scale（）和改变transform-origin来实现的。仍然感谢这个选项。 :) –

也许尝试这一点，我在几个项目使用。

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

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

来源

2017-01-19 15:18:26 grinmax

这会在动画时看到移动元素的一部分。 –

回答

相关问题