선형 그래디언트를 사용한 CSS 전환: 내 그래디언트가 전환되지 않는 이유는 무엇입니까?-CSS 튜토리얼-php.cn

선형 그래디언트를 사용한 CSS 전환: 내 그래디언트가 전환되지 않는 이유는 무엇입니까?

Linda Hamilton

풀어 주다： 2024-10-31 10:13:01

원래의

926명이 탐색했습니다.

CSS Transition with Linear Gradient: Why Does My Gradient Not Transition?

선형 그래디언트를 사용한 CSS 전환: 잠재적인 함정

CSS 선형 그래디언트 배경이 있는 버튼에 전환을 추가하려고 하면 예상치 못한 효과가 나타날 수 있습니다. 이러한 불일치는 그라디언트 전환의 현재 제한 사항에서 비롯됩니다.

그라디언트를 직접 전환하려고 시도하는 대신 해결 방법에는 추가 요소를 도입하는 것이 포함됩니다.

<code class="css">a.button {
  background: linear-gradient(top, green, #a5c956);
}

.button-helper {
  position: absolute;
  background: linear-gradient(top, lime, #89af37);
  transition: opacity 1s linear;
}

a.button:hover .button-helper {
  opacity: 1;
}</code>

로그인 후 복사

이 도우미 요소는 자체 선형 요소를 보유합니다. 그라데이션 및 맞춤형 불투명도. 전환은 마우스를 올리면 불투명도를 0과 1 사이에서 전환하여 그라데이션 전환의 환상을 만듭니다.

위 내용은 선형 그래디언트를 사용한 CSS 전환: 내 그래디언트가 전환되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!