이 글에서는 주로 이미지 회전을 구현하는 html5의 애니메이션 효과를 소개합니다. 페이지 이동 관련 정보가 필요한 친구들은 참고하세요.
1 먼저 효과를 살펴보세요.
2. 코드는 다음과 같습니다.
<img src="images/circle.png" alt="" id="circle"/>
@mixin ani-btnRotate{
@keyframes btnRotate{
from{transform: rotateZ(0);}
to{transform: rotateZ(360deg);}
}
}
@include ani-btnRotate;
#circle{
position: absolute;
left: 50%;
width: REM(338);
height: REM(338);
margin-top: REM(200);
margin-left: REM(-338/2);
transform-origin: center center ;
animation: btnRotate 1s 1s linear forwards;
}사용된 사진은 다음과 같습니다. (흰색 회전 사진입니다.)
위 내용은 이 글의 전체 내용입니다. 모두의 공부에 도움이 되세요, 그리고 더 많은 관련 내용을 보시려면 PHP 중국어 홈페이지를 주목해주세요!
관련 추천:
jQuery와 HTML5를 사용하여 휴대폰을 흔들어 옷을 갈아입는 특수 효과를 구현하는 방법
캔버스를 사용하여 마우스를 누른 채 이동하여 궤적을 그리는 방법을 구현하는 방법
로 삼각형, 직사각형 등의 다각형을 그리는 방법
위 내용은 HTML5에서 그림 회전의 애니메이션 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
