Анимированный фон "Плазма" на чистом CSS

Разработка Анимированный фон "Плазма" на чистом CSS

Нет прав для скачивания
Анимированный фон "Плазма" на чистом CSS
Пишем наш стиль CSS, при понимании языка фон можно подкорректировать намного плавнее и медленние:
CSS:
:root {
    --colorOne: rgba(128,63,32,1);
    --colorTwo: rgba(32,64,128,1);
    --colorThree: rgba(32,128,32,1);
    --colorFour: rgba(64,128,128,1);
    --colorFive: rgba(128,32,128,1);
}

html {
    mix-blend-mode: color-dodge;
      background-image: repeating-linear-gradient(90deg,
        var(--colorFive),
        var(--colorFour) 25vw,
        var(--colorFive) 50vw);
    animation: oneFX 3s infinite ease-in-out alternate;
}

@keyframes oneFX {
    to {
      background-position: -100vw;
    }
}

body::before {
    content: '';
    mix-blend-mode: color-dodge;
    position: fixed;
    top: -100vw;
    left: -100vw;
    right: -100vw;
    bottom: -100vw;
    background-image: repeating-linear-gradient(90deg,
        var(--colorFive),
        var(--colorThree) 200px,
        var(--colorFive) 400px);
    animation: twoFX 8s infinite linear;
}

@keyframes twoFX {
    to {
        transform: rotate(1turn);
    }
}

body::after {
    content: '';
    mix-blend-mode: color-dodge;
    position: fixed;
    top: -100vw;
    left: -100vw;
    right: -100vw;
    bottom: -100vw;
    background-image: radial-gradient(circle at center, var(--colorOne), var(--colorTwo), var(--colorOne), var(--colorTwo), var(--colorOne), var(--colorTwo), var(--colorOne), var(--colorTwo), var(--colorOne), var(--colorTwo), var(--colorOne), var(--colorTwo), var(--colorOne), var(--colorTwo), var(--colorOne), var(--colorTwo));
    animation: threeFX 6.5s infinite ease-in-out;
}

@keyframes threeFX {
    0%, 100% {
        transform: translate(-15%, -15%);
    }

    25% {
        transform: translate(-15%, 15%);
    }
 
    50% {
        transform: translate(15%, 15%);
    }
 
    75% {
      transform: translate(15%, -15%);
    }
}
Смотрим, что у нас получилось:
1q82.gif
Автор
baltun
Скачиваний
0
Просмотры
966
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

Ещё ресурсы от baltun

  • Gemini post alert plus
    Gemini post alert plus
    Оценивает содержимое сообщения с помощью искусственного интеллекта Gemini.
  • AIXF Batch Phrase Replace
    AIXF Batch Phrase Replace
    Инструмент администратора для пакетной замены фраз.
  • AIXF Backup Combo
    AIXF Backup Combo
    Инструмент резервного копирования с опциями экспорта mysqldump и PHP
  • Tickets
    Tickets
    Полноценная система тикетов.
  • Accessible Navigation for Assistive Devices
    Accessible Navigation for Assistive Devices
    Добавляет кнопки для навигации.
Похожие ресурсы
Назад
Верх Низ