ZorNet.Ru — сайт для вебмастера » HTML и CSS » Фоновая градиентная анимация на CSS3

Фоновая градиентная анимация на CSS3

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

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

Пример:

Анимация с градиентом фона

Установка:

HTML

Код

<div class="kusavunos">
  <div class="gadisena gadisena1">
  <h1 class="opisaniye"> ZorNet.Ru — сайт для вебмастера</h1>
  </div>
  </div>

CSS

Код

@keyframes slide {
  0% {
  background-position-x: 0%;
  }
  100% {
  background-position-x: 600vw;
  }
  }
  *{
  margin: 0;
  padding: 0;
  border: 0;
  }
  body {
  font-family: 'filson-soft';
  margin: 0;
  overflow: hidden;
  color: white;
  text-align: center;
  }

  .kusavunos{
  height: 800px;
  line-height: 400px;
  }

  .gadisena1 {
  height: 100%;
  background: repeating-linear-gradient(-45deg, red 0%, yellow 7.14%, lime 14.28%, cyan 21.42%, cyan 28.56%, blue 35.7%, magenta 42.84%, red 50%);
  background-size: 600vw 600vw;
  -webkit-animation: 'slide' 10s infinite linear forwards;
  padding-top: 200px;
  }

  .opisaniye {
  font-size: 8vw;
  line-height: 8vw;
  }

Тон градиента для в качестве фона и добавление движения слайда.

Демонстрация

07 Января 2021 Загрузок: 3 Просмотров: 1183 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0