선형 그래디언트를 사용한 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!