对比度父级的Gooey CSS效果 [英] Gooey css effects with contrast parent
问题描述
我正尝试仅使用CSS （不使用svg）创建粘糊糊的效果。
一切正常，但是我的父容器具有对比度过滤器，我不能在子元素上使用颜色（对比度过滤器会更改颜色）。
I'm trying to create gooey effect with CSS only (without svg).
Everything goes right but my parent container has a contrast filter and I can't use colors on my child elements (the contrast filter changes the colors).
有人知道仅使用CSS来实现这种效果的基本方法，还是反转对比度滤镜以在子元素上获得正确的颜色？
Does someone know of a basic way to make this effect with only CSS or reverse the contrast filter to get my right colors on the child elements?
我的代码
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>
推荐答案
我已生效。在容器上，我设置了一个伪元素将其覆盖，可以使用所需的任何颜色。
I have taken your effect. On the container, I have set a pseudo element that covers it, with whatever color you want.
使用混合混合模式，可以在以下位置设置该颜色：容器是黑色的，其余保持白色：
And with a mix-blend-mode, I can set this color where the container is black, keeping the remaining white:
（顺便说一句，效果非常好！）
(By the way, a very nice effect !)
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上使用，在Edge上可以使用过滤器，但不能使用混合模式。
Added another way to get your request. This is harder to set up, but will work on Edge, where filter is available but blend modes do not.
此代码段涉及使用您以前的设置中的2个，以及每种都有不同的原色。 （您已经可以使用原始设置实现原色）。
This snippet involves using 2 of your previous setting, and a different primary color for each. (You could already achieve primary colors with your original setting).
要获得特定颜色，请将不同的alpha设置为2种设置，并以某种方式可以实现任何颜色您想要的（即使过程并不容易）
To get a particular color, you set different alphas to the 2 settings, and somehow you can achieve any color that you want (even though the process is not easy)
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>
另一种尝试，这次使用的滤镜更加复杂。
Another try, this time with a more complex filter.
颜色通过色相旋转
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...。
Another try, this time a single 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以检查混合模式。
Trying to get a solution that works cross-browser . Added javascript to check blend-mode availiabily.
只需单击按钮即可运行该功能。
Just click the button to run the function.
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>
这篇关于对比度父级的Gooey CSS效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
