我想制作一些帶有文本的影片以及我希望文本顏色根據背景（它重疊的物件）改變的顏色。然而，我所追求的效果并不僅僅適用于不透明度，因為我想要完全不同的顏色。
例如：
請注意，我使用 GIMP 制作了這個示例。另請注意，文本不會總是像這樣對齊/重疊，而只會在影片期間。
這種效果相對容易實作還是需要復雜的 JavaScript 代碼和庫？
uj5u.com熱心網友回復：
這是可以使用混合混合模式完成的事情的示例。
這個片段只是使用差異 - 您將不得不根據您想要的顏色組合嘗試不同的方法。
在文本的兩個位上使用差異并將它們放在白色背景上并使文本以黃色開始，將它們轉換為一種藍色，然后當影片文本碰到藍色背景時，我們會得到較淺的陰影。
恐怕我從來沒有找到一種簡單的演算法方法來決定應該為 mix-blend-mode 賦予什么值，并且總是以實驗結束。
.container {
width: 100vw;
height: 10em;
background-image: linear-gradient(-45deg, #5920d6 0 40%, transparent 40% 100%);
background-color: white;
overflow: hidden;
position: relative;
display: inline-block;
}
.container>* {
color: #5920d6;
color: yellow;
font-family: sans-serif;
font-size: 3em;
mix-blend-mode: difference;
}
.static {
position: absolute;
top: 40%;
display: inline-block;
color: yellow;
}
.move {
position: absolute;
animation: move 10s linear infinite;
top: calc(40% 0.25em);
color: yellow;
}
@keyframes move {
0% {
transform: translate(0, -0.1em);
}
100% {
transform: translate(50vw, -0.1em);
}
}<div class="container">
<div class="static">Some text</div>
<div class="move">Hello World</div>
</div>uj5u.com熱心網友回復：
您可以在 w3school 網站上閱讀更多關于 CSS 影片的資訊：
https://www.w3schools.com/css/css3_animations.asp
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/486156.html
標籤：javascript html css