CSS-Übergang mit linearem Farbverlauf: Warum geht mein Farbverlauf nicht über?

CSS-Übergang mit linearem Farbverlauf: Eine potenzielle Gefahr

Beim Versuch, einen Übergang zu einer Schaltfläche mit einem CSS-Hintergrund mit linearem Farbverlauf hinzuzufügen, passiert dies kann einen unerwarteten Mangel an Wirkung zeigen. Diese Diskrepanz ergibt sich aus der aktuellen Beschränkung beim Übergang von Farbverläufen.

Anstatt zu versuchen, den Farbverlauf direkt zu übertragen, besteht eine Problemumgehung darin, ein zusätzliches Element einzuführen:

<code class="css">a.button {
  background: linear-gradient(top, green, #a5c956);
}

.button-helper {
  position: absolute;
  background: linear-gradient(top, lime, #89af37);
  transition: opacity 1s linear;
}

a.button:hover .button-helper {
  opacity: 1;
}</code>

Dieses Hilfselement verfügt über eine eigene Linearität Farbverlauf und maßgeschneiderte Deckkraft. Der Übergang schaltet die Deckkraft beim Schweben zwischen 0 und 1 um, wodurch die Illusion eines Farbverlaufsübergangs entsteht.

Das obige ist der detaillierte Inhalt vonCSS-Übergang mit linearem Farbverlauf: Warum geht mein Farbverlauf nicht über?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!