Wie erstelle ich mit CSS einen gleitenden Hintergrund-Farbübergang von unten?

So ändern Sie die Hintergrundfarbe von unten

Beim Versuch, die Hintergrundfarbe eines Elements beim Hover mithilfe von CSS-Übergängen zu ändern, einer Möglicherweise tritt das Problem auf, dass der Hintergrund eingeblendet wird, anstatt nach oben zu rutschen. Während es möglich ist, den Fading-Effekt mit dem bereitgestellten Code zu erreichen, ist ein anderer Ansatz erforderlich, um die gewünschte Gleitanimation zu erzielen.

Eine Lösung besteht darin, ein Hintergrundbild oder einen Farbverlauf zu verwenden und die Hintergrundposition schrittweise anzupassen. Diese Methode erzeugt die Illusion, dass der Hintergrund von unten nach oben gleitet:

.box {
    width: 200px; height: 100px;
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, red 50%, black 50%);
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}

.box:hover {
    background-position: 0 -100%;
}

<div class="box"></div>

In diesem Szenario erhält das Element ein Hintergrundbild mit einem linearen Farbverlauf, wodurch der gewünschte vertikale Übergang entsteht. Wenn Sie mit der Maus über das Element fahren, wird die Hintergrundposition nach oben verschoben, wodurch der Effekt entsteht, als würde der Hintergrund von unten nach oben gleiten.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS einen gleitenden Hintergrund-Farbübergang von unten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!