CSS 호버 효과를 사용하여 왼쪽에서 오른쪽으로 배경색 채우기를 만드는 방법은 무엇입니까?

CSS를 사용하여 왼쪽에서 오른쪽으로 배경색 채우기 만들기

CSS3에서는 동적 시각 효과를 만드는 전환을 사용하여 호버 효과를 향상할 수 있습니다. . 일반적인 시나리오 중 하나는 마우스를 올리면 요소의 배경을 왼쪽에서 오른쪽으로 다른 색상으로 채우는 것입니다. 이를 달성하려면:

1단계: 선형 그라데이션 사용

선형 그라데이션을 활용하여 배경색 전환을 설정합니다. 50%에서 명확한 구분으로 두 가지 색상을 정의합니다(예: 50% 이전에는 빨간색, 50% 이후에는 파란색).

2단계: 그라데이션 크기 조정 및 위치 지정

배경 크기를 요소 너비의 두 배, 높이의 100%로 조정합니다(예: background-size: 200% 100%;). 그라데이션을 요소 오른쪽에 배치합니다.

3단계: 호버 전환 생성

호버에서 배경 위치를 '왼쪽'으로 수정합니다. 이를 전환(예: 전환: all 2seasing;)과 결합하여 위치 변경에 애니메이션을 적용합니다.

예제 코드:

<code class="css">background: linear-gradient(to left, red 50%, blue 50%) right;
background-size: 200% 100%;

/* On hover */
background-position: left;</code>

선택적 개선 사항 :

전환 색상을 제어하려면 배경 너비를 300%로 늘리고 그라데이션의 시작 및 끝 비율을 미세 조정하세요(예: 시작 34%, 끝 65%).

브라우저 지원:

브라우저 간 호환성을 위해 전환 속성 앞에 접두사를 붙이는 것을 고려하세요.

위 내용은 CSS 호버 효과를 사용하여 왼쪽에서 오른쪽으로 배경색 채우기를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!