CSS로 호버 활성화 이미지 스핀을 만드는 방법은 무엇입니까?

호버 활성화 이미지 회전

호버 시 이미지 회전과 같은 동적 동작을 웹페이지에 통합하면 사용자 참여도를 높일 수 있습니다. 원형 테두리가 있는 이미지에 CSS를 사용하여 이 효과를 얻으려면 다음 단계를 따르세요.

1. 회전()을 사용한 CSS3 전환

CSS3 전환을 활용하여 마우스 오버 시 이미지를 부드럽게 회전합니다. 전환 속성은 애니메이션의 지속 시간과 여유 기능을 정의합니다. 이 경우 전환 기간을 0.7초로 설정하고 Ease-in-out easing 함수를 지정합니다.

<code class="css">img {
  transition: transform .7s ease-in-out;
}</code>

2. 호버 변환

호버 시 이미지를 회전하려면 회전() 함수와 함께 변환 속성을 사용하여 원하는 회전 각도를 설정합니다. 이번 예시에서는 이미지를 360도 회전시켜보겠습니다.

<code class="css">img:hover {
  transform: rotate(360deg);
}</code>

3. HTML 구현

HTML 코드 내에 적절한 소스와 크기의 이미지 요소를 배치하세요.

<code class="html"><img  src="/static/imghwm/default1.png" data-src="path/to/image.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="CSS로 호버 활성화 이미지 스핀을 만드는 방법은 무엇입니까?" ></code>

샘플 코드

회전하는 이미지 효과를 보여주는 전체 코드 샘플은 다음과 같습니다.

<code class="css">img {
  border-radius: 50%;
  transition: transform .7s ease-in-out;
}

img:hover {
  transform: rotate(360deg);
}</code>

<code class="html"><img  src="/static/imghwm/default1.png" data-src="path/to/image.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="CSS로 호버 활성화 이미지 스핀을 만드는 방법은 무엇입니까?" ></code>

이 코드를 사용하면 사용자가 이미지 위로 마우스를 이동할 때마다 이미지가 부드럽게 360도 회전합니다.

위 내용은 CSS로 호버 활성화 이미지 스핀을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!