Wie fülle ich die Hintergrundfarbe eines LI-Elements beim Schweben mit CSS3 von links nach rechts?

Hintergrundfarbe von links nach rechts mit CSS füllen

F: Ich versuche einen Effekt zu erstellen, bei dem die Hintergrundfarbe eines Li-Elements von links nach rechts gefüllt wird schweben. Wie kann ich dies mit CSS3 erreichen?

A: Verwenden Sie einen linearen Farbverlauf als Hintergrund des Elements und animieren Sie seine Position. Hier ist der 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>

Ändern Sie beim Bewegen des Mauszeigers die Hintergrundposition nach links, um das Element auszufüllen. Sie können einen sanften Übergang hinzufügen, indem Sie Transition:all 2sease; verwenden.

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

Demo:

<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>

Das obige ist der detaillierte Inhalt vonWie fülle ich die Hintergrundfarbe eines LI-Elements beim Schweben mit CSS3 von links nach rechts?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!