2023-05-15 18:00:48
Как создать анимированный градиентный фон на сайте при помощи CSS?
Для создания анимированного градиентного фона на сайте при помощи CSS можно использовать свойство background и задать несколько градиентов в CSS. Например, можно задать два градиента и использовать анимацию для их плавного перехода друг в друга. Ниже приведен пример CSS кода:
background: linear-gradient(to right, #000000, #ffffff), linear-gradient(to right, #ffffff, #000000);
background-size: 200% 100%;
background-position: left bottom;
animation: gradient 10s ease infinite;
@keyframes gradient {
0% {
background-position: left bottom;
}
100% {
background-position: right bottom;
}
}
В этом примере мы задали два линейных градиента, которые идут друг за другом. Затем мы установили размер фона в 200% и позицию на левой стороне нижнего края. Далее мы задали анимацию gradient, которая будет длиться 10 секунд, иметь функцию плавности ease и будет повторяться бесконечно. Внутри анимации мы задали два ключевых кадра: 0%, где позиция фона находится на левой стороне нижнего края, и 100%, где позиция фона находится на правой стороне нижнего края.
@frontendInterview
2.2K views15:00
F
