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

CSS를 사용하여 마우스를 올리면 왼쪽에서 오른쪽으로 배경색 채우기

마우스를 올리면 왼쪽에서 오른쪽으로 배경색 채우기를 얻으려면 요소 위에는 선형 그래디언트 및 전환을 사용합니다. 50% 표시에서 빨간색과 파란색 등 두 가지 색상으로 선형 그라데이션을 구성하여 시작합니다. 그런 다음 그라디언트를 오른쪽에 배치하고 너비와 높이를 기준으로 요소 크기를 두 배로 설정합니다(예: 200%).

요소 위에 마우스를 올리면 배경 위치를 다음으로 변경합니다. "왼쪽". "전환: 모든 2의 용이성"을 통합합니다. 원활한 전환을 적용하려면

공급업체 접두사가 필요한 브라우저의 경우 초기 질문 아래의 설명을 참조하세요.

추가 사용자 정의

색상 전환을 위해 그라데이션 너비를 300%로 늘리고 그에 따라 시작(예: 34%) 및 끝(예: 65%) 위치를 조정합니다.

예:

<code class="css">div {
  font: 22px Arial;
  display: inline-block;
  padding: 1em 2em;
  text-align: center;
  color: white;
  background: red; /* default color */

  /* Linear gradient and initial position */
  background: linear-gradient(to left, salmon 50%, lightblue 50%) right;
  background-size: 200%;
  transition: .5s ease-out;
}
div:hover {
  background-position: left;
}</code>

HTML:

<code class="html"><div>Hover me</div></code>

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