如何在CSS中實現按鈕懸停的平滑漸變過渡？

具有線性漸變的CSS 過渡

問題：
使用CSS 將過渡合併到具有線性漸變背景的按鈕.

背景：

<br>a.button {<br>背景：-webkit-gradient(線性，左上，左下， color-stop (0%, @green), color-stop(100%, #a5c956));<br>-webkit-transition: 背景5s 線性;<br>}<p>a.button:hover {<br>}<br><br>a.button:hover {</p>-webkit-gradient(線性、左上、左下、color-stop(0%, @greenhover)、color-stop(100%, #89af37))<p>}<strong></strong></p>

> ;

解決方案：

遺憾的是，瀏覽器仍然不支援漸變過渡。因此，以下解決方法提供了解決方案：

<br>a.button {<br>position:relative;<br>z-index:9;<br>display:inline-block ;<br> 填充：0 10px;<br> 背景：-webkit-gradient(線性, 0 0, 0 100%, from(green), to(#a5c956));<br> 背景：-webkit-線性-漸變（頂部，綠色，#a5c956）;<br>背景：-moz-線性漸變（頂部，綠色，#a5c956）;背景：-o-線性漸變（頂部，綠色，#a5c956）; <p> 背景：線性漸變（頂部，綠色，#a5c956）;<br>}<br><br>.button-helper {<br> 位置：絕對;<br> z 索引：-1;<br> 頂部： 0;<br> 左：0；<br> 寬度：100%；<br> 高度：100%；<br> 不透明度：0；<br> 背景：-webkit-gradient(線性，0 0 , 0 100 %, from(lime), to(#89af37));<br> 背景: -webkit-linear-gradient(top, Lime, #89af37);<br> 背景: -moz-線性-gradient(top ，石灰， #89af37);<br>背景：-o-線性漸變(頂部，石灰，#89af37);<br>背景：線性漸變(頂部，石灰，#89af37);<br>-webkit-過渡：不透明度1秒線性；<br> -moz-transition：不透明度1 秒線性；</p> -o-transition：不透明度1 秒線性；<p>過渡：不透明度1 秒線性；<br>}<br><br>a .button:hover .button-helper {</p> 不透明度: 1;<p>}<br></p>

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

此方法使用一個附加元素所需的漸變並過渡其不透明度，從而在懸停時呈現平滑的顏色變化。

以上是如何在CSS中實現按鈕懸停的平滑漸變過渡？的詳細內容。更多資訊請關注PHP中文網其他相關文章！