Эффекты Gooey css с контрастным родителем

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

Ответы

Ответ 1

Я принял ваш эффект. На контейнере я установил псевдоэлемент, который его покрывает, любым цветом, который вы хотите.

И в режиме mix-blend-mode я могу установить этот цвет, где контейнер черный, сохраняя оставшийся белый:

(Кстати, очень приятный эффект!)

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>

Ответ 2

Для этого ответа мне пришлось только внести изменения в свойство фильтра

contrast(15) contrast(.5) sepia(1) brightness(1.85) hue-rotate(319deg) saturate(3.45)
  • Во-первых, мы устанавливаем контрастность 15 (20 сделали края слишком жесткими, если вы спросите меня).
  • Затем мы вернем его .5 (Да, вы можете складывать эти вещи)

Итак, теперь у нас есть фона lightgray и darkgray blobs

  • Применить сепию (которая придает ей цвет)
  • Добавить яркость 1,85 (теперь фон снова белый, и у нас есть цветные капли)
  • hue-rotate, чтобы получить нужный оттенок
  • насытить, чтобы придать ему насыщенность

Последние три свойства в списке необходимы для получения правильного цвета. Ваша цель - rgb (255, 113, 93). При использовании этой линии цвета имеют значение rgb (255, 115, 94)

Вы можете увидеть, как он работает в this Fiddle

Как оповещение. Вы также можете преобразовывать стек, а это означает, что если вы хотите центрировать капли, вам не придется использовать отрицательные поля, но используйте трюк translate(-50%, -50%). Затем, когда вы наводите на них курсор, вы можете просто складывать преобразования, подобные этому translate(-50%, -50%) translateX(-70px)