Wie kann ich lineare CSS-Verläufe auf einer Schaltfläche umwandeln?

CSS-Übergänge mit linearen Verläufen

Ein Benutzer hat Schwierigkeiten, Übergänge auf den Hintergrund einer Schaltfläche anzuwenden, der mithilfe eines linearen CSS-Verlaufs erstellt wird . Ihr Code lautet wie folgt:

<code class="css">a.button {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@green), color-stop(100%,#a5c956));
  -webkit-transition: background 5s linear;
}

a.button:hover {
  -webkit-gradient(linear, left top, left bottom, color-stop(0%,@greenhover), color-stop(100%,#89af37))
}</code>

Problem: Der Übergang funktioniert nicht auf dem Hintergrundverlauf der Schaltfläche.

Lösung:

Bedauerlicherweise können CSS-Übergänge nicht direkt auf lineare Verläufe angewendet werden. Daher ist eine Problemumgehung erforderlich:

1. Erstellen Sie ein zusätzliches Element mit dem gewünschten Farbverlauf.
2. Positionieren Sie das Element hinter der Schaltfläche (mit negativem Z-Index) und decken Sie denselben Bereich ab.
3. Setzen Sie die anfängliche Deckkraft des Verlaufselements auf 0.
4. Verwenden Sie den CSS-Übergang für die Opazitätseigenschaft, um das Verlaufselement beim Schweben allmählich einzublenden.

<code class="css">a.button {
  position: relative;
  z-index: 9;
  ... (rest of the CSS)

  background: linear-gradient(top, green, #a5c956);
}

.button-helper {
  position: absolute;
  z-index: -1;
  ... (rest of the CSS)

  background: linear-gradient(top, lime, #89af37);
  opacity: 0;
  -webkit-transition: opacity 1s linear;
  transition: opacity 1s linear;
}

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

<code class="html"><a href="#" class="button">
  <span class="button-helper"></span>
  button
</a></code>

Das obige ist der detaillierte Inhalt vonWie kann ich lineare CSS-Verläufe auf einer Schaltfläche umwandeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!