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%