Я хочу, чтобы эффект "blob" (или Gooey) был похож на сайт "Canva". Это должно быть намного проще и без какого-либо взаимодействия.
Я пытался использовать HTML5 Canvas, но я не очень хорош в этом. Поэтому я попытался сделать это только с помощью CSS, и я делаю это ... вроде.
.header:before {
content: "";
position: absolute;
top: -200px;
right: -500px;
z-index: -999;
background: #043d7a;
width: 1200px;
height: 700px;
-webkit-animation: move 20s linear infinite;
animation: move 20s linear infinite;
border-radius: 70% 30% 30% 70%/60% 40% 60% 40%
}
@-webkit-keyframes move {
0% {
border-radius: 70% 30% 30% 70%/60% 40% 60% 40%
}
25% {
width: 1190px;
border-radius: 72% 47% 43% 67%/54% 34% 69% 56%
}
50% {
width: 1170px;
border-radius: 72% 34% 66% 34%/54% 34% 69% 56%
}
75% {
width: 1190px;
border-radius: 72% 47% 43% 67%/37% 61% 46% 73%
}
100% {
width: 1200px;
border-radius: 70% 30% 30% 70%/60% 40% 60% 40%
}
}
@keyframes move {
0% {
border-radius: 70% 30% 30% 70%/60% 40% 60% 40%
}
25% {
width: 1210px;
border-radius: 72% 47% 43% 67%/54% 34% 69% 56%
}
50% {
width: 1150px;
border-radius: 72% 34% 66% 34%/54% 34% 69% 56%
}
75% {
width: 1170px;
border-radius: 72% 47% 43% 67%/37% 61% 46% 73%
}
100% {
width: 1200px;
border-radius: 70% 30% 30% 70%/60% 40% 60% 40%
}
}
.header элемент относительный, и это работает очень хорошо. Единственная проблема заключается в том, что BLOB-объект синего цвета, и мне нужно статичное изображение, чтобы было похоже, что BLOB-объект «прогуливается» по этому изображению. Просто посмотрите пример на веб-сайте «Canva.com» в заголовке: https://imgur.com/a/8vSsTUc Эта клейкая форма «живая», она перемещается и слегка меняет форму, но фоновое изображение исправлено. Итак, я хочу этот эффект, но без какого-либо взаимодействия, просто капля, меняющая форму и слегка двигающаяся. Если это невозможно с кросс-браузерным CSS, Canvas тоже подойдет.