Анимированный Blobs
Вставляем в Zero Block анимированный блуп
Пример
Инструкция
  1. Создаём Zero Block
  2. Добавляем шейп. Цвет шейпа - не важно.
Учтите, размер блупа будет такой, какой зададите шейпу. Хотите маленький блуп, сделайте 50*50 px, хотите большой, сделайте 200*200px. Поиграйтесь с размером и формой. Если шейп будет прямоугольный, то и блуп будет тоже прямоугольный, при этом вся анимация будет работать.

3. Задаём CSS класс шейпу "moving"
См. скриншот
4. При желании можно изменить цвет блупа.
См. скриншот
5. Добавляем HTML код на страницу, в блок Другое - Т123
HTML код в блок T123


<!-- Анимированный Blobs в Zero Block -->
<!-- Инструкции: https://sitebelov.ru/blobs -->
<style>
.moving {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.slider-thumb-19201 {
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
}
.slider-thumb-19201::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #f00080;
    border-radius: 62% 12% 47% 82% 10% 35%/45% 45% 80% 66%;
    will-change: border-radius, transform, opacity;
    animation: 5s linear infinite sliderShape;
    display: block;
    z-index: -1;
    -webkit-animation: 5s linear infinite sliderShape
}
@keyframes sliderShape {
    0%, 100% {
        border-radius: 42% 58% 70% 30%/45% 45% 55% 55%;
        transform: translate3d(0, 0, 0) rotateZ(.01deg)
    }
    34% {
        border-radius: 70% 30% 46% 54%/30% 29% 71% 70%;
        transform: translate3d(0, 5px, 0) rotateZ(.01deg)
    }
    50% {
        transform: translate3d(0, 0, 0) rotateZ(.01deg)
    }
    67% {
        border-radius: 100% 60% 60% 100%/100% 100% 60% 60%;
        transform: translate3d(0, -3px, 0) rotateZ(.01deg)
    }
}
</style>
<script>
let sliderThumb190 = document.createElement('div');
sliderThumb190.className = "slider-thumb-19201";
document.querySelector('.moving').append(sliderThumb190);
</script>
Made on
Tilda