Comment remplir la couleur d'arrière-plan de gauche à droite avec les effets de survol CSS ?

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

Dans un premier temps, positionnez l'arrière-plan vers la droite pour commencer par la couleur la plus à gauche. Au survol, changez 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 ; propriété.

Exemple de code

<code class="css">div {
    background: linear-gradient(to left, red 50%, blue 50%) right;
    background-size: 200% 100%;
    transition:all 2s ease;
}
div:hover {
    background-position: left;
}</code>

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 :

<code class="css">background: linear-gradient(to left, red 34%, blue 65%) right;
background-size: 300% 100%;</code>

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éliorez l'attrait visuel global de vos conceptions.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!