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

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

DDD
Libérer: 2024-11-02 21:15:30
original
1007 Les gens l'ont consulté

How to achieve a left-to-right color fill animation on an li element using 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>
Copier après la connexion
  1. 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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal