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

Анимация градиентов на чистом CSS

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

Где сам веб мастер может выставить ту палитру, которая соответствует его интернет ресурса, где не забываем, что по времени она будет измениться, где идет плавный переход с одной палитры на другую.

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

Посмотрев полностью мануал, вы сможете понять как работают CSS-градиенты и как их создавать, что не чего сложного нет, так как коды такого дизайна очень просты, даже новичок, которые быстро поймут фактор работы.

Также по вверх фона можно написать:

Установочный процесс:

HTML

Код

<div class="animirovan-gradiyent">
<h1>Создание красивых анимированных градиентов CSS3</h1>
<h2><a href="http://zornet.ru">ZorNet.Ru — сайт для вебмастера</a></h2>
</div>

CSS

Код

body {
  margin: 0;
  width: 100%;
  height: 100vh;
  font-family: "Exo", sans-serif;
  color: #f9f4f4;
  background: linear-gradient(-45deg, #de6945, #da2f71, #1c97c3, #19c19a );
  background-size: 400% 400%;
  -webkit-animation: gradientBG 10s ease infinite;
  animation: gradientBG 10s ease infinite;
}
.animirovan-gradiyent {
  width: 100%;
  position: absolute;
  top: 35%;
  text-align: center;
}
h1 {
  font-weight: 900;
}

a {
  text-decoration: none;
  color: #96d8f9;
}

@-webkit-keyframes gradientBG {
  0% {
  background-position: 0% 50%;
  }
  50% {
  background-position: 100% 50%;
  }
  100% {
  background-position: 0% 50%;
  }
}
@keyframes gradientBG {
  0% {
  background-position: 0% 50%;
  }
  50% {
  background-position: 100% 50%;
  }
  100% {
  background-position: 0% 50%;
  }
}

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

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

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

Видео обзор:

23 Августа 2019 Загрузок: 1 Просмотров: 2436 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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