我试图用CSS创建gooey效果(没有svg)。
一切顺利,但我的父容器有一个对比度过滤器,我不能使用我的子元素上的颜色(对比度过滤器更改颜色)。
一切顺利,但我的父容器有一个对比度过滤器,我不能使用我的子元素上的颜色(对比度过滤器更改颜色)。
有人知道一个基本的方式来做这个效果,只有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.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.99) 2.5s; Box-shadow: 0 0 30px 10px rgb(255,93); } .blobs:hover .blob:first-child { transform:translateX(-70px); } .blobs:hover .blob:last-child { transform:translateX(70px); } .original-color { height: 100px; background: rgb(255,93); }
<div class="blobs"> <div class="blob"></div> <div class="blob"></div> </div> <div class="original-color"></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); } .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.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上工作,而Filter可以使用,但是混合模式不可用。
此代码段涉及使用您之前的2个设置,并为每个设置使用不同的基本颜色。 (您可以使用原始设置实现原色)。
要获得特定的颜色,您可以设置不同的阿尔法2设置,不知何故,您可以实现任何你想要的颜色(即使过程不容易)
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.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,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.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>
另一个尝试,这个时候一个单一的…
.test { border: 1px solid black; width: 600px; height: 400px; background-color: white; background-image: radial-gradient(circle,red 100px,transparent 140px),radial-gradient(circle,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.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>