Wie erreiche ich mithilfe von CSS eine Farbfüllungsanimation von links nach rechts für ein Li-Element?

Hintergrundfarbe von links nach rechts mit CSS füllen

Sie möchten dafür sorgen, dass der Hintergrund eines Li-Elements von links nach rechts mit einer anderen Farbe gefüllt wird Farbe beim Schweben. Um dies zu erreichen, verwenden Sie einen linearen Farbverlauf und animieren die Hintergrundposition.

Code-Implementierung:

1. Erstellen Sie einen linearen Farbverlauf, der 50 % Rot und Rot umfasst 50 % Blau.
2. Geben Sie den Farbverlauf beginnend am rechten Rand an.
3. Definieren Sie den Hintergrund so, dass er doppelt so breit ist wie das Element (z. B. „Hintergrundgröße: 200 % 100 %;“).

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

4. Ändern Sie beim Schweben die Hintergrundposition zum linken Rand und wenden Sie einen Übergang an (z. B. „Übergang:alle 2 Sekunden erleichtern;“).

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

Herstellerpräfixe:

Herstellerpräfixe können erforderlich sein, wenn Sie die browserübergreifende Kompatibilität sicherstellen möchten. Hinweise zu bestimmten Herstellerpräfixen finden Sie in den Kommentaren in Ihrer Frage.

Zusätzliche Optionen:

• Um einen „Farbübergang“ zu erstellen, erweitern Sie den Farbverlauf auf 300 % Breite und passen Sie die Übergangsanfangs- und -endpunkte entsprechend an.
• Eine Live-Demonstration finden Sie unter dem bereitgestellten JS Fiddle-Link.

Das obige ist der detaillierte Inhalt vonWie erreiche ich mithilfe von CSS eine Farbfüllungsanimation von links nach rechts für ein Li-Element?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!