CSSでボタンホバー時に滑らかなグラデーショントランジションを実現するにはどうすればよいですか?

線形グラデーションを使用した CSS トランジション

問題:
CSS を使用して線形グラデーションの背景を持つボタンにトランジションを組み込むのは困難であることが判明.

Background:

<br>a.button {<br>background: -webkit-gradient(linear, 左上, 左下, color-stop(0%, @green), color-stop(100%, #a5c956));<br>-webkit-transition: 背景 5 秒線形;<br>}</p>
<p>a.button:hover {<br>-webkit-gradient(linear, 左上, 左下, color-stop(0%, @greenhover), color-stop(100%, #89af37))<br>}<br></pre&gt ;</p>
<p><strong>解決策:</strong></p>
<p>残念ながら、ブラウザではグラデーション トランジションがサポートされていません。したがって、次の回避策が解決策となります:</p>
<p><pre class="brush:php;toolbar:false"><br>a.button {<br>position:relative;<br>z-index:9;<br>display:inline-block ;<br> パディング: 0 10px;<br> 背景: -webkit-gradient(linear, 0 0, 0 100%, from(green), to(#a5c956));<br> 背景: -webkit-linear- gradient(top, green, #a5c956);<br> 背景: -moz-linear-gradient(top, green, #a5c956);<br> 背景: -o-linear-gradient(top, green, #a5c956); <br> 背景: Linear-gradient(top, green, #a5c956);<br>}</p>
<p>.button-helper {<br> 位置: 絶対;<br> z-index: -1;<br> 上: 0;<br> 左: 0;<br> 幅: 100%;<br> 高さ: 100%;<br> 不透明度: 0;<br> 背景: -webkit-gradient(linear, 0 0 、0 100%、from(ライム)、to(#89af37));<br> 背景: -webkit-linear-gradient(top, ライム, #89af37);<br> 背景: -moz-linear-gradient(top 、ライム、#89af37);<br> 背景: -o-linear-gradient(top, lime, #89af37);<br> 背景: Linear-gradient(top, lime, #89af37);<br> -webkit-トランジション: 不透明度 1 秒の線形;<br> -moz-トランジション: 不透明度 1 秒の線形;<br> -o-トランジション: 不透明度 1 秒の線形;<br> トランジション: 不透明度 1 秒の線形;<br>}</p>
<p>a .button:hover .button-helper {<br> 不透明度: 1;<br>}<br>

<br><a href="#" クラス="button"><span class="button-helper"></span>button</a><br>

このメソッドは、目的のグラデーションとその不透明度の遷移により、ホバー時に滑らかな色の変化の外観が可能になります。

以上がCSSでボタンホバー時に滑らかなグラデーショントランジションを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。