• Для скачивания ресурсов Форума пользователь должен написать не менее 5 полезных сообщений и получить 5 симпатий.
    Если Вы не хотите выполнять условия, Вы должны купить переход в группу "Работяга" или любое наше дополнение и сможете скачивать ресурсы, перевод происходит по email, который указывается при оплате.
Анимированный фон "Плазма" на чистом 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
Просмотры
438
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

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

  • Font Awesome Manager
    Font Awesome Manager
    Позволяет использовать только шрифты которые необходимы XenForo.
  • [OzzModz] Badges
    [OzzModz] Badges
    покажите всем что пользователь онлайн или оффлайн выставив этот статус на полэкрана в постбит.
  • [Liam W.] Conversation Folders
    [Liam W.] Conversation Folders
    Папки для переписок.
  • s9e Media Sites
    s9e Media Sites
    Пак BB-кодов для вставки медиа контента.
  • Watermarker
    Бета Watermarker
    Водяные знаки для изображений.
Верх Низ