Я пытаюсь создать эффект gooey с 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>