溢出插入？

我們有一個正常的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

這會在動畫時看到移動元素的一部分。 –

回答

相關問題