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

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

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

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

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

HTML

Это для того, если решите что то расположить по вверх фона, как пример надпись.

Код

<h1><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Анимация градиента на CSS3</font></font></h1>

CSS

Код

body {
  width: 100wh;
  height: 90vh;
  color: #f5efef;
  background: linear-gradient(-45deg, #e86b44, #dc437e, #1e93bd, #19c79e);
  background-size: 400% 400%;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;
}

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

@-moz-keyframes Gradient {
  0% {
  background-position: 0% 50%
  }
  50% {
  background-position: 100% 50%
  }
  100% {
  background-position: 0% 50%
  }
}

@keyframes Gradient {
  0% {
  background-position: 0% 50%
  }
  50% {
  background-position: 100% 50%
  }
  100% {
  background-position: 0% 50%
  }
}

h1,
h6 {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  text-align: center;
  position: absolute;
  top: 45%;
  right: 0;
  left: 0;
}

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

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

23 Июля 2018 Просмотров: 1493 Комментариев: (0)

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

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

Kosten

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