Remplissage de la couleur d'arrière-plan de gauche à droite à l'aide de CSS

En CSS, vous pouvez créer des effets de survol captivants en utilisant des dégradés linéaires et en animant le positionnement de l'arrière-plan. Cette approche vous permet de remplir l'arrière-plan d'un élément de gauche à droite avec une nouvelle couleur lors du survol.

Dégradé linéaire et taille d'arrière-plan

La clé est d'utiliser un arrière-plan dégradé linéaire composé de deux couleurs et définissez la taille de l'arrière-plan sur deux fois la largeur de l'élément. Cela vous permet de créer une transition transparente entre les deux couleurs.

Positionnement et animation de l'arrière-plan

Au départ, positionnez l'arrière-plan vers la droite pour commencer par la couleur la plus à gauche. Lors du survol, modifiez la position de l'arrière-plan vers la gauche pour révéler la couleur la plus à droite. Pour rendre la transition progressive, ajoutez la transition : all 2s easy ; property.

Exemple de code

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

Personnalisation de la transition

Pour contrôler les points de début et de fin de la transition, ajustez les pourcentages dans le dégradé linéaire. Par exemple, voici une configuration qui passe de 34 % à 65 % de la largeur de l'élément :

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

En mettant en œuvre cette technique, vous pouvez créer sans effort des effets de survol élégants et accrocheurs qui améliorent l'expérience utilisateur de vos applications Web et améliorent l'attrait visuel global de vos conceptions.