Как создать анимированные блобы CSS менее чем за ДВЕ минуты и более?

Как по мне, блобы — это одна из самых красивых вещей, которые можно создать с помощью CSS. А анимированные — тем более.

Но я — человек, который не умеет создавать красивые элементы дизайна, и мысль о создании чего-то вроде блоба казалась мне вначале довольно пугающей. Оказалось, что, помимо страха, все довольно просто. Создать красивый блоб с помощью обычного CSS довольно просто и без использования каких-либо библиотек CSS, таких как TailwindCSS.

Давайте погрузимся в процесс и посмотрим, как можно создать CSS Blobs.

Создание CSS Blobs

Мы создадим несколько разновидностей CSS-блобов, а также простой CSS-блог. Они будут выглядеть так, как показано ниже:


Простой CSS blob

Чтобы создать нечто подобное, создайте HTML-файл и создайте в нем пару div’ов, как показано в приведенном ниже коде:

<body>
...
<h1>CSS Blob & Animated Blob Examples</h1>
    <div class="container">
        <div class="blob">
        </div>

    </div>
...
</body>

Вход в полноэкранный режим Выход из полноэкранного режима

Это будет основа дизайна, которую мы будем стилизовать.

Теперь, чтобы сделать этот div невидимым, добавьте следующий CSS в раздел style вашего HTML-файла, или свяжите его с внешним CSS-файлом. В моем примере я сделал последнее.

.container .blob{
    border-radius: 94% 31% 30% 67% / 67% 37% 56% 34%;
    width: 250px;
    height: 250px;
    background: #f09;
    background-image: linear-gradient(45deg, #3023AE 0%, #f09 100%);
    box-shadow: -10vmin 10vmin 0 rgba(255,255,255,0.07);
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Вот и все!

Это все, что вам нужно для создания CSS-блоба, как показано выше. Не стесняйтесь играть со значениями CSS и посмотрите, как они отразятся на HTML-странице.

Как анимировать CSS-блобы?

Хотя это может показаться сложной задачей, для анимации CSS-блоба потребуется всего несколько дополнительных строк кода. Обновите следующий код CSS в вашем файле и перезагрузите HTML-страницу, и вы увидите анимацию в действии!

border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%;
    width: 250px;
    height: 250px;
    background: rgb(0, 255, 98);
    background-image: linear-gradient(45deg, #3023AE 0%, rgb(0, 255, 98) 100%);
    box-shadow: -10vmin 10vmin 0 rgba(255,255,255,0.07);
    animation: animateBlob 10s linear infinite alternate;

Вход в полноэкранный режим Выход из полноэкранного режима

[БОНУС] Как добавить фон изображения к CSS-блобу?

Играя с внешним видом CSS-блоба, я также попробовал добавить фоновое изображение к анимированному блобу, чтобы посмотреть, как это будет выглядеть. Мне понравилось то, что я смог придумать, поэтому делюсь тем же. Возможно, вы найдете реальное применение этому. Если найдете, мне будет интересно посмотреть на это. Итак, поделитесь.


CSS Blob с фоновым изображением

Ниже приведен код CSS Blob с фоновым изображением:

border-radius: 23% 31% 30% 67% / 72% 47% 40% 26%;
    width: 450px;
    height: auto;
    background: linear-gradient(#a03692, #b46ca8, #c0aec5);
    overflow: hidden;
    animation: animateImg 8s linear infinite;
Вход в полноэкранный режим Выйти из полноэкранного режима

Вы также можете скачать пример проекта отсюда. В нем есть все 3 примера, о которых я рассказывал здесь.

**Изначально эта статья была опубликована здесь.

Оцените статью
Procodings.ru
Добавить комментарий