CSS3를 사용하여 마우스를 올리면 LI 요소의 배경색을 왼쪽에서 오른쪽으로 채우는 방법은 무엇입니까?

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

Q: li 요소의 배경색이 왼쪽에서 오른쪽으로 채워지는 효과를 만들려고 합니다. 호버. CSS3를 사용하여 이를 어떻게 달성할 수 있나요?

A: 선형 그래디언트를 요소의 배경으로 활용하고 해당 위치에 애니메이션을 적용합니다. 코드는 다음과 같습니다.

<code class="css">/* Set up the background gradient (red to blue) */
background: linear-gradient(to left, red 50%, blue 50%) right;

/* Make the background twice the size of the element */
background-size: 200% 100%;

/* Position the background to the right */
background-position: right;</code>

마우스를 올리면 배경 위치를 왼쪽으로 변경하여 요소를 채웁니다. 전환: all 2seasing;을 사용하여 부드러운 전환을 추가할 수 있습니다.

<code class="css">/* On hover, change the background position to the left */
background-position: left;</code>

데모:

<code class="html"><li>Hover me to fill the background</li></code>

<code class="css">li {
  display: inline-block;
  padding: 1em;
  background: linear-gradient(to left, red 50%, blue 50%) right;
  background-size: 200% 100%;
  background-position: right;
  transition: all 2s ease;
}

li:hover {
  background-position: left;
}</code>

위 내용은 CSS3를 사용하여 마우스를 올리면 LI 요소의 배경색을 왼쪽에서 오른쪽으로 채우는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!