Heim  >  Artikel  >  Web-Frontend  >  CSS-Übergang mit linearem Farbverlauf: Warum geht mein Farbverlauf nicht über?

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

Linda Hamilton
Linda HamiltonOriginal
2024-10-31 10:13:01844Durchsuche

 CSS Transition with Linear Gradient: Why Does My Gradient Not Transition?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn