CSS realisiert den Übergangseffekt des Hintergrundverlaufsbildübergangs

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen vor, die die Übergangseffekttechniken für CSS-Hintergrundverlaufsbilder im Detail erklären. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen. Ich hoffe, es kann allen helfen.

1. Hintergrundbild unterstützt keinen CSS3-Übergang

Hintergrundbild unterstützt keinen CSS3-Übergang und CSS3-Verlaufsverlauf existiert als Hintergrundbild Manchmal haben die folgenden CSS-Einstellungen keinen Übergangseffekt.

.gradient {
  background-image: linear-gradient(to right, olive, green);
  transition: background-image 0.5s linear;
}
.gradient:hover {
  background-image: linear-gradient(to right, green, purple);
}

Wenn Sie mit der Maus darüber fahren, werden Sie feststellen, dass die Farbverlaufsänderung sehr abrupt ist und es überhaupt keinen Übergangseffekt gibt.

Die nächste Frage ist: Wenn wir einen Übergangseffekt erzielen möchten, wenn der Farbverlauf schwebt, wie können wir ihn erreichen? Hier sind einige mögliche Methoden.

2. Verwenden Sie die Hintergrundposition, um einen Farbverlaufsübergang zu erreichen.

Hintergrundbild unterstützt keinen CSS3-Übergang, Hintergrundposition jedoch schon Durch Steuern der Hintergrundposition können wir einen Verlaufsübergangseffekt erzielen.

Der Effekt ist wie folgt (Mauszeiger):

Der relevante Code ist wie folgt:

<p class="box"></p>

.box {
    max-width: 400px;
    height: 200px;
    background: linear-gradient(to right, olive, green, purple);
    background-size: 200%;
    transition: background-position .5s;    
}
.box:hover {
    background-position: 100% 0;    
}

3. Verwenden Sie Hintergrundfarbe, um einen Verlaufsübergang zu erreichen

Hintergrundbild unterstützt keinen CSS3-Übergang, aber Hintergrundfarbe Durch die Steuerung der Hintergrundfarbe und einer Farbwiedergabetechnik können wir auch einen Verlaufsübergangseffekt erzielen.

Vergleich der Maus-Hover-Effekte vorher und nachher: ​​

Der relevante Code ist wie folgt folgt:

<p class="box"></p>

.box {
    max-width: 400px;
    height: 200px;
    background: olive linear-gradient(to right, rgba(0,255,0,0), rgba(0,255,0,.5));
    transition: background-color .5s;    
}
.box:hover {
    background-color: purple;    
}

4. Verwenden Sie Pseudoelemente und Deckkraft, um einen Farbverlaufsübergang zu erreichen

Verwenden Sie Pseudoelemente, um einen transformierten Verlaufseffekt zu erzeugen, und erzielen Sie einen Verlaufsübergangseffekt, indem Sie die Deckkraft des Überlagerungsverlaufs ändern.

Das Bild unten zeigt den Effekt nach dem Schweben:

Der relevante Code lautet wie folgt:

<p class="box"></p>

.box {
    max-width: 400px; height: 200px;
    background: linear-gradient(to right, olive, green);
    position: relative;
    z-index: 0;    
}
.box::before {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: linear-gradient(to right, green, purple);
    opacity: 0;    
    transition: opacity .5s;
    z-index: -1;
}
.box:hover::before {
    opacity: 1;    
}

Das obige ist der detaillierte Inhalt vonCSS realisiert den Übergangseffekt des Hintergrundverlaufsbildübergangs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!