Comment remplir la couleur d'arrière-plan d'un élément LI de gauche à droite en survol avec CSS3 ?

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

Q : J'essaie de créer un effet où la couleur d'arrière-plan d'un élément li se remplit de gauche à droite flotter. Comment puis-je y parvenir en utilisant CSS3 ?

A : Utiliser un dégradé linéaire comme arrière-plan de l'élément et animer sa position. Voici le code :

<code class="css">/* Set up the background gradient (red to blue) */
background: linear-gradient(to left, red 50%, blue 50%) right;

/* Make the background twice the size of the element */
background-size: 200% 100%;

/* Position the background to the right */
background-position: right;</code>

Au survol, changez la position de l'arrière-plan vers la gauche pour remplir l'élément. Vous pouvez ajouter une transition en douceur en utilisant transition : all 2s easy ;.

<code class="css">/* On hover, change the background position to the left */
background-position: left;</code>

Démo :

<code class="html"><li>Hover me to fill the background</li></code>

<code class="css">li {
  display: inline-block;
  padding: 1em;
  background: linear-gradient(to left, red 50%, blue 50%) right;
  background-size: 200% 100%;
  background-position: right;
  transition: all 2s ease;
}

li:hover {
  background-position: left;
}</code>

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!