CSS를 사용하여 li 요소에서 왼쪽에서 오른쪽으로 색상 채우기 애니메이션을 구현하는 방법은 무엇입니까?

CSS로 배경색을 왼쪽에서 오른쪽으로 채우기

li 요소의 배경을 왼쪽에서 오른쪽으로 다른 색상으로 채우려고 합니다. 마우스를 올리면 색상이 지정됩니다. 이를 달성하려면 선형 그라데이션을 활용하고 배경 위치에 애니메이션을 적용합니다.

코드 구현:

1. 50% 빨간색과 50% 범위의 선형 그라데이션을 설정합니다. 50% 파란색.
2. 오른쪽 가장자리에서 시작하는 그라데이션을 지정합니다.
3. 배경을 요소 너비의 두 배로 정의합니다(예: "배경 크기: 200% 100%;").

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

4. 마우스를 올리면 배경 위치를 왼쪽 가장자리로 수정하고 전환을 적용합니다(예: "transition:all 2seasing;").

<code class="css">background-position: left;</code>

공급업체 접두사:

브라우저 간 호환성을 보장하려면 공급업체 접두사가 필요할 수 있습니다. 특정 공급업체 접두사에 대한 지침은 질문의 설명을 참조하세요.

추가 옵션:

• "색상 전환"을 생성하려면 그라데이션을 다음으로 확장합니다. 300% 너비로 설정하고 이에 따라 전환 시작 및 끝 지점을 조정합니다.
• 실시간 데모를 보려면 제공된 JS Fiddle 링크를 참조하세요.

위 내용은 CSS를 사용하여 li 요소에서 왼쪽에서 오른쪽으로 색상 채우기 애니메이션을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!