버튼의 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 전환은 선형 그래디언트에 직접 적용할 수 없습니다. 따라서 해결 방법이 필요합니다.

1. 원하는 그라데이션으로 추가 요소를 만듭니다.
2. 요소를 버튼 뒤에 배치하고(음수 Z 인덱스 사용) 동일한 영역을 덮습니다.
3. 그라디언트 요소의 초기 불투명도를 0으로 설정합니다.
4. 불투명 속성에 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!