이미지 회전 애니메이션을 구현하는 CSS-프런트엔드 Q&A-php.cn

웹디자인에서 사진은 빼놓을 수 없는 요소 중 하나입니다. 웹페이지를 더욱 흥미롭고 매력적으로 만들기 위해 CSS3 애니메이션 기술을 사용하여 이미지에 회전 애니메이션 효과를 추가할 수 있습니다. 다음으로 이 글에서는 CSS를 사용하여 이미지 회전 애니메이션을 구현하는 방법을 소개합니다.

1. 단계

이미지 회전 애니메이션을 구현하려면 다음 단계를 따라야 합니다.

HTML에 이미지 태그 추가:

먼저 HTML에 이미지 태그를 추가합니다. 예:

CSS에서 이미지 스타일을 설정합니다.

두 번째로, CSS에서 이미지 스타일을 설정합니다. 예:

img{
width: 200px; //이미지 너비를 200px로 설정
height: 200px; //이미지 높이를 200px로 설정
border-radius: 50%; 원형으로
전환: 모두 0.5초; //이미지의 애니메이션 지속 시간을 0.5초로 설정합니다.
}

회전 애니메이션 효과 추가:

마지막으로 CSS에 회전 애니메이션 효과를 위한 코드를 추가합니다. 예:

img:hover{

transform: rotate(360deg); //设置图片旋转360度

로그인 후 복사

}

2. 코드 분석

위 코드에서는 CSS3의 변환 속성을 사용하여 이미지 회전을 수행합니다. 변환 속성은 회전, 크기 조정, 변환 등을 포함한 다양한 변환 효과를 얻을 수 있습니다. 여기서는 이미지의 회전 애니메이션 효과를 얻기 위해 변환: 회전(360deg)을 사용합니다. 그 중 회전(360deg)은 사진을 360도 회전해야 한다는 의미입니다.

또한 전환 속성을 사용하여 애니메이션 지속 시간을 제어합니다. 전환 속성은 요소의 스타일을 제어하여 한 상태에서 다른 상태로 원활하게 전환할 수 있는 CSS 전환 효과를 구현하는 방법입니다. 여기서는 Transition: all 0.5s를 설정했습니다. 이는 모든 속성 변경이 원활한 전환을 위해 0.5초가 걸린다는 것을 의미합니다.

마지막으로 img:hover 선택기에서 변환: 회전(360deg)을 사용하여 마우스를 가리키고 있을 때 이미지 회전 효과를 얻었습니다.

3. 전체 코드

다음은 이미지 스타일 및 회전 애니메이션 효과를 포함한 전체 CSS 코드입니다.

img{
width: 200px;
border-radius:
전환: all 0.5s;
}

img:hover{