8 февр. 2024

Красивый и отзывчивый анимированный фон CSS

Красивый и отзывчивый анимированный фон CSS, созданный совместно с HTML. В дизайне используются анимированные градиентные цвета, которые постоянно меняются.

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

Подключаем библиотеку в <head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

А стили в <body>

<style>
body {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  height: 100vh;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>

Важно!

Не забываем что все блоки должны иметь прозрачность цвета 0%

Красивый и отзывчивый анимированный фон CSS

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

Подключаем библиотеку в <head>

А стили в <body>

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

Оставь свой комментарий первым