Blob анимация со статическим фоновым изображением? - PullRequest
0 голосов
/ 02 ноября 2019

Я хочу, чтобы эффект "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 тоже подойдет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...