Rellenar el color de fondo de izquierda a derecha usando CSS

En CSS, puedes crear efectos de desplazamiento cautivadores utilizando degradados lineales y animando la posición del fondo. Este enfoque le permite rellenar el fondo de un elemento de izquierda a derecha con un nuevo color al pasar el cursor.

Degradado lineal y tamaño de fondo

La clave es usar un fondo degradado lineal que consta de dos colores y establezca el tamaño del fondo en el doble del ancho del elemento. Esto le permite crear una transición perfecta entre los dos colores.

Posicionamiento y animación del fondo

Inicialmente, coloque el fondo a la derecha para comenzar con el color más a la izquierda. Al pasar el cursor, cambie la posición del fondo hacia la izquierda para revelar el color más a la derecha. Para que la transición sea gradual, agregue la transición: todos los 2 facilitan; propiedad.

Ejemplo de código

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

Personalizar la transición

Para controlar los puntos inicial y final de la transición, ajuste los porcentajes en el degradado lineal. Por ejemplo, aquí hay una configuración que pasa del 34% al 65% del ancho del elemento:

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

Al implementar esta técnica, puede crear sin esfuerzo efectos de desplazamiento elegantes y llamativos que mejoran la experiencia del usuario de sus aplicaciones web y mejoran el atractivo visual general de sus diseños.