배경:
선형 그래디언트는 웹 디자인에서 일반적으로 사용되는 시각적으로 매력적인 효과입니다. 그러나 전환을 추가하는 것은 어려울 수 있습니다. 이 문서에서는 문제를 살펴보고 실용적인 솔루션을 제공합니다.
문제:
질문에 언급된 대로 CSS 선형 그래디언트에 전환을 적용하는 것은 직접 지원되지 않습니다. 질문의 코드 조각은 배경 속성에 대한 전환이 작동하지 않음을 보여줍니다.
이유:
안타깝게도 현재 웹 브라우저는 기본적으로 배경 속성 전환을 지원하지 않습니다. 그라디언트.
해결책:
그라디언트 전환의 환상을 만들려면 그라디언트가 있는 추가 요소를 사용하고 불투명도를 전환하는 것이 해결 방법입니다.
<code class="css">.button { /* Button styles... */ } .button-helper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background: /* Gradient for hover state... */; transition: opacity 1s linear; } .button:hover .button-helper { opacity: 1; }</code>
설명:
이 접근 방식은 페이드 인되는 호버 상태가 있는 도우미 요소를 추가합니다. 전환은 그라데이션 자체가 아닌 도우미 요소의 불투명도에 적용됩니다. . 버튼을 가리키면 도우미 요소의 불투명도가 점차 증가하여 그라데이션 전환 효과를 제공합니다.
추가 참고 사항:
위 내용은 선형 그라데이션 배경에 대한 CSS 전환 효과를 어떻게 얻을 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!