Wie erreicht man einen sanften Verlaufsübergang beim Hovern einer Schaltfläche in CSS?

CSS-Übergang mit linearem Farbverlauf

Problem:
Das Integrieren eines Übergangs zu einer Schaltfläche mit einem Hintergrund mit linearem Farbverlauf mithilfe von CSS erweist sich als Herausforderung .

Hintergrund:

<br>a.button {<br>Hintergrund: -webkit-gradient(linear, links oben, links unten, color-stop(0%, @green), color-stop(100%, #a5c956));<br>-webkit-transition: Hintergrund 5s linear;<br>}</p>
<p>a.button:hover {<br>-webkit-gradient(linear, left top, left bottom, color-stop(0%, @greenhover), color-stop(100%, #89af37))<br>}<br></pre&gt ;</p>
<p><strong>Lösung:</strong></p>
<p>Bedauerlicherweise fehlt die Browserunterstützung für Farbverlaufsübergänge weiterhin. Daher bietet der folgende Workaround eine Lösung:</p>
<p><pre class="brush:php;toolbar:false"><br>a.button {<br> position: relative;<br> z-index: 9;<br> display: inline-block ;<br> Polsterung: 0 10px;<br> Hintergrund: -webkit-gradient(linear, 0 0, 0 100%, from(green), to(#a5c956));<br> Hintergrund: -webkit-linear- Farbverlauf (oben, grün, #a5c956);<br> Hintergrund: -moz-linear-gradient(oben, grün, #a5c956);<br> Hintergrund: -o-linear-gradient(oben, grün, #a5c956); <br>Hintergrund: linear-gradient(top, green, #a5c956);<br>}</p>
<p>.button-helper {<br>Position: absolut;<br>z-index: -1;<br> oben: 0;<br> links: 0;<br> Breite: 100 %;<br> Höhe: 100 %;<br> Deckkraft: 0;<br> Hintergrund: -webkit-gradient(linear, 0 0 , 0 100 %, from(lime), to(#89af37));<br> Hintergrund: -webkit-linear-gradient(top, lime, #89af37);<br> Hintergrund: -moz-linear-gradient(top , Limette, #89af37);<br> Hintergrund: -o-linear-gradient(top, Lime, #89af37);<br> Hintergrund: linear-gradient(top, Lime, #89af37);<br> -webkit- Übergang: Deckkraft 1s linear;<br> -moz-transition: Deckkraft 1s linear;<br> -o-transition: Deckkraft 1s linear;<br> Übergang: Deckkraft 1s linear;<br>}</p>
<p>a .button:hover .button-helper {<br> Deckkraft: 1;<br>}<br>

<br><a href="#" Klasse ="button"><span class="button-helper"></span>button</a><br>

Diese Methode verwendet ein zusätzliches Element mit dem den gewünschten Farbverlauf und ändert seine Deckkraft, sodass beim Schweben ein sanfter Farbwechsel entsteht.

Das obige ist der detaillierte Inhalt vonWie erreicht man einen sanften Verlaufsübergang beim Hovern einer Schaltfläche in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!