Wie erstelle ich eine Hintergrundfarbfüllung von links nach rechts mit CSS-Hover-Effekten?

Hintergrundfarbfüllung von links nach rechts mit CSS erstellen

In CSS3 können Hover-Effekte mithilfe von Übergängen verbessert werden, um dynamische visuelle Effekte zu erstellen . Ein häufiges Szenario besteht darin, den Hintergrund eines Elements beim Bewegen des Mauszeigers von links nach rechts mit einer anderen Farbe zu füllen. Um dies zu erreichen:

Schritt 1: Verwenden Sie einen linearen Farbverlauf

Verwenden Sie einen linearen Farbverlauf, um den Hintergrundfarbübergang festzulegen. Definieren Sie zwei Farben mit einer klaren Unterteilung bei 50 % (z. B. Rot vor 50 %, Blau nach 50 %).

Schritt 2: Skalieren und positionieren Sie den Farbverlauf

Skalieren Sie den Hintergrund so, dass er das Doppelte der Breite des Elements und die Höhe von 100 % hat (z. B. Hintergrundgröße: 200 % 100 %;). Positionieren Sie den Farbverlauf rechts vom Element.

Schritt 3: Erstellen Sie den Hover-Übergang

Ändern Sie beim Hover die Hintergrundposition auf „links“. Verknüpfen Sie dies mit einem Übergang (z. B. Übergang: alle 2er erleichtern;), um die Positionsänderung zu animieren.

Beispielcode:

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

/* On hover */
background-position: left;</code>

Optionale Erweiterungen :

Um die Farbe des Übergangs zu steuern, erhöhen Sie die Hintergrundbreite auf 300 % und passen Sie die Start- und Endprozentsätze des Farbverlaufs fein an (z. B. 34 % für den Anfang, 65 % für das Ende).

Browser-Unterstützung:

Erwägen Sie, der Übergangseigenschaft ein Präfix voranzustellen, um eine browserübergreifende Kompatibilität zu gewährleisten.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Hintergrundfarbfüllung von links nach rechts mit CSS-Hover-Effekten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!