Добрый день. Рассмотрим как просто сделать анимированный градиентный фон на чистом css.
В этой статье сделаем градиентный фон и при помощи CSS стилей анимируем плавную смену градиента фона.
Делаем простую страничку в HTML, примерно так:
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Тест</h1>
</body>
На этой странице подключена только таблица стилей и в теге body указан заголовок h1.
Далее в файле styles.css вставляем такой текст:
body {
background: linear-gradient(90deg, rgba(132,128,194,1) 0%, rgba(177,177,218,0.9108018207282913) 35%, rgba(0,212,255,1) 100%);
-webkit-animation: gradient 30s ease infinite;
-moz-animation: gradient 30s ease infinite;
animation: gradient 30s ease infinite;
background-size: 400% 400%;
}
Тут просто указываем, что фон тега body у нас будет иметь линейный градиент и будет иметь бесконечную анимацию с названием gradient.
Так же обязательно указываем размер бэкграунда (фона).
Далее накидываем анимацию таким образом:
@-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%}
}
Кому-то может показаться, что три раза написан одинаковый текст. Так и есть. Это делается для того, чтобы во всех браузерах отображалась эта анимация.
- webkit-: браузеры Chrome, Safari, Opera;
- moz-: браузер Mozilla Firefox;
В описании анимации мы указываем что будет смена позиции фона в процентах по оси x и по оси y. Примерно должно получится так...
