HTML5에서 그림 회전의 애니메이션 효과를 얻는 방법

이 글에서는 주로 이미지 회전을 구현하는 html5의 애니메이션 효과를 소개합니다. 페이지 이동 관련 정보가 필요한 친구들은 참고하세요.

1 먼저 효과를 살펴보세요.

2. 코드는 다음과 같습니다.

<img src="/static/imghw/default1.png"  data-src="images/circle.png"  class="lazy"   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 사용 Canvas

로 삼각형, 직사각형 등의 다각형을 그리는 방법

위 내용은 HTML5에서 그림 회전의 애니메이션 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!