Comment réaliser une animation de remplissage de couleur de gauche à droite sur un élément li en utilisant CSS ?

Remplissez la couleur d'arrière-plan de gauche à droite avec CSS

Vous cherchez à ce que l'arrière-plan d'un élément li se remplisse de gauche à droite avec un élément différent couleur en survol. Pour y parvenir, vous utiliserez un dégradé linéaire et animerez la position de l'arrière-plan.

Implémentation du code :

1. Établissez un dégradé linéaire couvrant 50 % de rouge et 50 % de bleu.
2. Spécifiez le dégradé en commençant sur le bord droit.
3. Définissez que l'arrière-plan soit deux fois plus large que la largeur de l'élément (par exemple, "background-size: 200% 100%;").

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

4. Au survol, modifiez la position de l'arrière-plan sur le bord gauche et appliquez une transition (par exemple, "transition:all 2s easy;").

<code class="css">background-position: left;</code>

Préfixes du fournisseur :

Les préfixes du fournisseur peuvent être nécessaires si vous souhaitez garantir la compatibilité entre navigateurs. Reportez-vous aux commentaires dans votre question pour obtenir des conseils sur les préfixes de fournisseurs spécifiques.

Options supplémentaires :

• Pour créer une « transition de couleur », étendez le dégradé à 300 % de largeur et ajustez les points de début et de fin de transition en conséquence.
• Voir le lien JS Fiddle fourni pour une démonstration en direct.

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!