CSS에서 버튼을 가리키면 부드러운 그라데이션 전환을 달성하는 방법은 무엇입니까?

선형 그라데이션을 사용한 CSS 전환

문제:
CSS를 사용하여 선형 그라데이션 배경이 있는 버튼으로의 전환을 통합하는 것은 어려운 일입니다. .

배경:

<br>a.button {<br>배경: -webkit-gradient(선형, 왼쪽 상단, 왼쪽 하단, 색상 중지(0%, @green), 색상 중지(100%, #a5c956));<br>-webkit-transition: 배경 5s 선형;<br>}</p>
<p>a.button:hover {<br>-webkit-gradient(선형, 왼쪽 상단, 왼쪽 하단, 색상 중지(0%, @greenhover), 색상 중지(100%, #89af37))<br>}<br></pre&gt ;</p>
<p><strong>해결 방법:</strong></p>
<p>안타깝게도 그라데이션 전환에 대한 브라우저 지원은 아직 없습니다. 따라서 다음 해결 방법은 해결책을 제공합니다.</p>
<p><pre class="brush:php;toolbar:false"><br>a.button {<br> position:relative;<br> z-index: 9;<br> display: inline-block ;<br> 패딩: 0 10px;<br> 배경: -webkit-gradient(linear, 0 0, 0 100%, from(green), to(#a5c956));<br> 배경: -webkit-linear- 그래디언트(상단, 녹색, #a5c956);<br> 배경: -moz-linear-gradient(상단, 녹색, #a5c956);<br> 배경: -o-linear-gradient(상단, 녹색, #a5c956); <br> 배경: 선형 그라데이션(상단, 녹색, #a5c956);<br>}</p>
<p>.button-helper {<br> 위치: 절대;<br> z-색인: -1;<br> 위쪽: 0;<br> 왼쪽: 0;<br> 너비: 100%;<br> 높이: 100%;<br> 불투명도: 0;<br> 배경: -webkit-gradient(선형, 0 0 , 0 100%, from(lime), to(#89af37));<br> 배경: -webkit-linear-gradient(top,lime, #89af37);<br> 배경: -moz-linear-gradient(top , 라임, #89af37);<br> 배경: -o-linear-gradient(상단, 라임, #89af37);<br> 배경: 선형-그라디언트(상단, 라임, #89af37);<br> -webkit- 전환: 불투명도 1초 선형;<br> -moz-transition: 불투명도 1초 선형;<br> -o-transition: 불투명도 1초 선형;<br> 전환: 불투명도 1초 선형;<br>}</p>
<p>a .button:hover .button-helper {<br> 불투명도: 1;<br>}<br>

<br><a href="#" 클래스 ="button"><span class="button-helper"></span>button</a><br>

이 방법은 다음과 같은 추가 요소를 사용합니다. 원하는 그라데이션을 적용하고 불투명도를 전환하여 마우스를 올리면 부드러운 색상 변경이 나타날 수 있습니다.

위 내용은 CSS에서 버튼을 가리키면 부드러운 그라데이션 전환을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!