對比父母的Gooey css效果

Question

我試圖用CSS創建粘性效果（沒有svg） 。 一切順利，但我的父容器有一個contrast filter ，我不能在我的子元素上使用顏色（對比度濾鏡會改變顏色）。

是否有人知道只使用CSS制作此效果的基本方法，或者反轉對比度濾鏡以在子元素上獲得正確的顏色？

我的代碼：

 body{ background: #fff; } .blobs { position:absolute; top:0; left:0; bottom:0; right:0; background: #fff; width:400px; height:200px; margin:auto; filter:contrast(20); -webkit-filter:contrast(20); } .blob { background:black; width:100px; height:100px; position:absolute; left:50%; top:50%; margin-top:-50px; margin-left:-50px; border-radius:100%; transition: cubic-bezier(0.82, 0.1, 0.24, 0.99) 2.5s; -webkit-transition: cubic-bezier(0.82, 0.1, 0.24, 0.99) 2.5s; box-shadow: 0 0 30px 10px black; } .blobs:hover .blob:first-child { transform:translateX(-70px); } .blobs:hover .blob:last-child { transform:translateX(70px); } 

 <div class="blobs"> <div class="blob"></div> <div class="blob"></div> </div> 

當我為子元素着色時：

 body{ background: #fff; } .blobs { position:absolute; top:0; left:0; bottom:0; right:0; background: #fff; width:400px; height:200px; margin:auto; filter:contrast(20); -webkit-filter:contrast(20); } .blob { background: rgb(255, 113, 93); width:100px; height:100px; position:absolute; left:50%; top:50%; margin-top:-50px; margin-left:-50px; border-radius:100%; transition: cubic-bezier(0.82, 0.1, 0.24, 0.99) 2.5s; -webkit-transition: cubic-bezier(0.82, 0.1, 0.24, 0.99) 2.5s; box-shadow: 0 0 30px 10px rgb(255, 113, 93); } .blobs:hover .blob:first-child { transform:translateX(-70px); } .blobs:hover .blob:last-child { transform:translateX(70px); } .original-color { height: 100px; background: rgb(255, 113, 93); } 

 <div class="blobs"> <div class="blob"></div> <div class="blob"></div> </div> <div class="original-color"></div> 

我的小提琴

Answer 1

我已經采取了你的效果。 在容器上，我設置了一個覆蓋它的偽元素，無論你想要什么顏色。

使用混合混合模式，我可以在容器為黑色的地方設置此顏色，保留剩余的白色：

（順便說一下，效果非常好！）

 body{ background: #fff; } .blobs { position:absolute; top:0; left:0; bottom:0; right:0; background: #fff; width:400px; height:200px; margin:auto; filter:contrast(20); -webkit-filter:contrast(20); } .blobs:after { content: ""; position: absolute; top:0; left:0; bottom:0; right:0; background-color: coral; mix-blend-mode: lighten; } .blob { background:black; width:100px; height:100px; position:absolute; left:50%; top:50%; margin-top:-50px; margin-left:-50px; border-radius:100%; transition: cubic-bezier(0.82, 0.1, 0.24, 0.99) 1.5s; box-shadow: 0 0 30px 10px black; } .blobs:hover .blob:first-child { transform:translateX(-70px); } .blobs:hover .blob:last-child { transform:translateX(70px); } 

 <div class="blobs"> <div class="blob"></div> <div class="blob"></div> </div> 

添加了另一種獲取請求的方式。 這很難設置，但可以在Edge上使用，其中過濾器可用但混合模式不可用。

此代碼段涉及使用先前設置中的2個，並為每個設置使用不同的原色。 （您可以使用原始設置實現原色）。

要獲得特定的顏色，您可以為2個設置設置不同的alpha，並以某種方式可以實現您想要的任何顏色（即使過程並不容易）

 body{ background: #fff; } .blobs { position:absolute; top:0; left:0; bottom:0; right:0; background: #fff; width:400px; height:200px; margin:auto; filter:contrast(20); -webkit-filter:contrast(20); opacity: 0.99; } .blob { width:100px; height:100px; position:absolute; left:50%; top:50%; margin-top:-50px; margin-left:-50px; border-radius:100%; transition: cubic-bezier(0.82, 0.1, 0.24, 0.99) 2.5s; } .blobs:hover .blob:first-child, .blobs:hover ~ .blobs .blob:first-child { transform:translateX(-70px); } .blobs:hover .blob:last-child, .blobs:hover ~ .blobs .blob:last-child { transform:translateX(70px); } .blobs:nth-child(1) { opacity: 0.57; } .blobs:nth-child(1) .blob { background: red; box-shadow: 0 0 30px 10px red; } .blobs:nth-child(2) { pointer-events: none; opacity: 0.08; } .blobs:nth-child(2) .blob { background: yellow; box-shadow: 0 0 30px 10px yellow; } .test { width: 100px; height: 100px; position: absolute; left: 0px; background-color: rgb(255, 113, 93); } 

 <div class="blobs"> <div class="blob"></div> <div class="blob"></div> </div> <div class="blobs"> <div class="blob"></div> <div class="blob"></div> </div> <div class="test"></div> 

另一個嘗試，這次使用更復雜的過濾器。

顏色通過色調旋轉實現

 body { background: #fff; } .blobs { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #fff; width: 400px; height: 200px; margin: auto; -webkit-filter: contrast(20) hue-rotate(-25deg); filter: contrast(20) hue-rotate(-25deg); } .blob { background: red; width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin-top: -50px; margin-left: -50px; border-radius: 100%; transition: cubic-bezier(0.82, 0.1, 0.24, 0.99) 1.5s; box-shadow: 0 0 30px 10px red; } .blobs:hover .blob:first-child { transform: translateX(-70px); } .blobs:hover .blob:last-child { transform: translateX(70px); } 

 <div class="blobs"> <div class="blob"></div> <div class="blob"></div> </div> 

另一個嘗試，這次是一個div ....

 .test { border: 1px solid black; width: 600px; height: 400px; background-color: white; background-image: radial-gradient(circle, red 100px, transparent 140px), radial-gradient(circle, red 100px, transparent 140px); background-position: -150px 0px, 150px 0px; background-repeat: no-repeat; -webkit-filter: contrast(20) hue-rotate(35deg); filter: contrast(20) hue-rotate(35deg); transition: background-position 2s; animation: crazy 13s infinite steps(12); } .test:hover { background-position: 0px 0px, 0px 0px; } @keyframes crazy { from { filter: contrast(20) hue-rotate(0deg); } to { filter: contrast(20) hue-rotate(360deg); } } 

 <div class="test"></div> 

試圖獲得跨瀏覽器的解決方案。 添加了javascript以有效地檢查混合模式。

只需單擊按鈕即可運行該功能。

 function check () { if('CSS' in window && 'supports' in window.CSS) { var support = window.CSS.supports('mix-blend-mode','lighten'); if ( ! support) { var element = document.getElementById('blobs'); element.classList.add('compat'); } } } 

 body{ background: #fff; } .blobs { position:absolute; top:0; left:0; bottom:0; right:0; background: #fff; width:400px; height:200px; margin:auto; filter:contrast(20); -webkit-filter:contrast(20); } .blobs:after { content: ""; position: absolute; top:0; left:0; bottom:0; right:0; background-color: coral; mix-blend-mode: lighten; } .blob { background:black; box-shadow: 0 0 30px 10px black; width:100px; height:100px; position:absolute; left:50%; top:50%; margin-top:-50px; margin-left:-50px; border-radius:100%; transition: cubic-bezier(0.82, 0.1, 0.24, 0.99) 1.5s; } .blobs:hover .blob:first-child { transform:translateX(-70px); } .blobs:hover .blob:last-child { transform:translateX(70px); } /* compatibility */ .blobs.compat { -webkit-filter:contrast(20) hue-rotate(-25deg); filter:contrast(20) hue-rotate(-25deg); } .blobs.compat:after { content: none; } .compat .blob { background: red; box-shadow: 0 0 30px 10px red; } 

 <div class="blobs" id="blobs"> <div class="blob"></div> <div class="blob"></div> </div> <button onclick="check()">Check</button> 

Answer 2

對於這個答案，我只需要對filter屬性進行更改

contrast(15) contrast(.5) sepia(1) brightness(1.85) hue-rotate(319deg) saturate(3.45)

• 首先，我們將對比度設置為15（如果你問我，20會使邊緣有點太硬）
• 然后我們將它設置回.5（是的，你可以堆疊這些東西）

所以現在我們有一個淺灰色的背景和黑色的斑點

• 塗棕褐色（給它一種顏色）
• 添加1.85亮度（現在背景再次變白，我們有彩色斑點）
• 色調旋轉以獲得正確的色調
• 飽和使其飽和

列表中的最后三個屬性對於獲得正確的顏色至關重要。 你的目標是rgb（255,113,93）。 應用此行后，顏色為rgb（255,115,94）

你可以看到它在這個小提琴中起作用

作為旁注。 您還可以堆疊變換，這意味着如果您想要使blob居中，則不必使用負邊距，而是使用translate(-50%, -50%)技巧。 然后當你將鼠標懸停在它們上面時，你可以簡單地堆疊變換，就像這樣translate(-50%, -50%) translateX(-70px)