Заливка цвета фона слева направо с помощью CSS

В CSS вы можете создавать захватывающие эффекты при наведении, используя линейные градиенты и анимацию позиционирования фона. Этот подход позволяет заполнять фон элемента слева направо новым цветом при наведении курсора.

Линейный градиент и размер фона

Ключевым моментом является использование фон с линейным градиентом, состоящий из двух цветов, и установите размер фона в два раза больше ширины элемента. Это позволяет создать плавный переход между двумя цветами.

Позиционирование и анимация фона

Изначально расположите фон справа, чтобы начать с самого левого цвета. При наведении курсора измените положение фона влево, чтобы отобразить самый правый цвет. Чтобы сделать переход постепенным, добавьте переход: все двойки легкость; property.

Пример кода

div {
    background: linear-gradient(to left, red 50%, blue 50%) right;
    background-size: 200% 100%;
    transition:all 2s ease;
}
div:hover {
    background-position: left;
}

Настройка перехода

Чтобы контролировать начальную и конечную точки перехода, настройте процентное соотношение линейного градиента. Например, вот конфигурация, которая переходит от 34% к 65% ширины элемента:

background: linear-gradient(to left, red 34%, blue 65%) right;
background-size: 300% 100%;

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