ホームページ > 記事 > ウェブフロントエンド > ボタン上の CSS 線形グラデーションを遷移するにはどうすればよいですか?
線形グラデーションを使用した CSS トランジション
ユーザーは、CSS 線形グラデーションを使用して作成されたボタンの背景にトランジションを適用する際に問題に直面しています。 。コードは次のとおりです:
<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>
問題: ボタンの背景のグラデーションでトランジションが機能しません。
解決策:
残念ながら、CSS トランジションを線形グラデーションに直接適用することはできません。したがって、次の回避策が必要です。
<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>
以上がボタン上の CSS 線形グラデーションを遷移するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。