Hintergrundfarbe von links nach rechts mit CSS füllen

In CSS können Sie faszinierende Hover-Effekte erstellen, indem Sie lineare Verläufe verwenden und die Hintergrundpositionierung animieren. Mit diesem Ansatz können Sie den Hintergrund eines Elements von links nach rechts mit einer neuen Farbe füllen, wenn Sie mit der Maus darüber fahren.

Linearer Farbverlauf und Hintergrundgröße

Der Schlüssel liegt in der Verwendung einen Hintergrund mit linearem Farbverlauf, der aus zwei Farben besteht, und legen Sie die Hintergrundgröße auf das Doppelte der Breite des Elements fest. Dadurch können Sie einen nahtlosen Übergang zwischen den beiden Farben erstellen.

Hintergrundpositionierung und Animation

Positionieren Sie den Hintergrund zunächst rechts, um mit der Farbe ganz links zu beginnen. Ändern Sie beim Bewegen des Mauszeigers die Hintergrundposition nach links, um die Farbe ganz rechts anzuzeigen. Um den Übergang schrittweise zu gestalten, fügen Sie „transition:all 2sease;“ hinzu. Eigenschaft.

Codebeispiel

div {
    background: linear-gradient(to left, red 50%, blue 50%) right;
    background-size: 200% 100%;
    transition:all 2s ease;
}
div:hover {
    background-position: left;
}

Anpassen des Übergangs

Um die Start- und Endpunkte des Übergangs zu steuern, passen Sie die Prozentsätze im linearen Farbverlauf an. Hier ist beispielsweise eine Konfiguration, die von 34 % auf 65 % der Elementbreite übergeht:

background: linear-gradient(to left, red 34%, blue 65%) right;
background-size: 300% 100%;

Durch die Implementierung dieser Technik können Sie mühelos elegante und auffällige Hover-Effekte erstellen, die das Benutzererlebnis Ihrer Webanwendungen verbessern und die allgemeine visuelle Attraktivität Ihrer Designs verbessern.