집 >웹 프론트엔드 >CSS 튜토리얼 >이미지 회전을 생성하는 순수 HTML5+CSS3

이미지 회전을 생성하는 순수 HTML5+CSS3

不言원래의: 2018-06-05 15:00:041869검색

이 글은 주로 이미지 회전을 생성하기 위한 순수한 HTML5+CSS3를 소개합니다. HTML5와 CSS3를 결합하여 구현한 일부 애니메이션 특수 효과는 관심 있는 친구들이 참고할 수 있습니다.

이 예는 많은 프로젝트에 적용할 수 있습니다. 유용하며 모두가 숙달할 수 있기를 바랍니다.

효과 그림은 다음과 같습니다.

이 효과는 실제로 달성하기 어렵지 않습니다. 코드 목록은 다음과 같습니다.

XML/HTML Code콘텐츠를 클립보드에 복사

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #liu{     
            width:280px;     
            height: 279px;     
            background: url(shishi.png) no-repeat;     
            border-radius:140px;     
            -webkit-animation:run 6s linear 0s infinite;     
        }     
        #liu:hover{     
            -webkit-animation-play-state:paused;     
        }     
        @-webkit-keyframes run{     
            from{     
                -webkit-transform:rotate(0deg);     
            }     
            to{     
                -webkit-transform:rotate(360deg);     
            }     
        }     
    </style>
</head>
<body>
    <p id="liu"></p>
</body>
</html>

1. ID는 liu p 인데 사진을 표시하는 영역인데 여기 사진은 배경사진이고 모서리를 둥글게 설정해서 둥근 효과를 냈습니다.
2. 코드의 핵심 부분은 그림을 무한히 회전시키는 방법입니다. 이를 달성하기 위해 -webkit-animation과 @-webkit-keyframes를 함께 사용할 수 있습니다.

-webkit-animation은 다음과 같이 정의된 복합 속성입니다.

-webkit-animation: 이름 기간 타이밍-함수 지연 iteration_count 방향

name: @-webkit-keyframes에 지정해야 하는 메서드입니다. 실행 애니메이션용.

duration: 한 주기의 애니메이션 실행 기간입니다.

타이밍 기능: 애니메이션 실행 효과는 선형적일 수도 있고 "빠른 속도 증가" 등이 될 수도 있습니다.

delay: 애니메이션 지연 실행 기간입니다.

iteration_count: 애니메이션 루프의 실행 횟수입니다. 무한이면 무한히 실행됩니다.

방향: 애니메이션 실행 방향.

3. @-webkit-keyframes의 두 가지 속성 from 및 to는 애니메이션 실행의 초기 값과 종료 값을 지정하는 것입니다.

4. -webkit-animation-play-state:paused;

위 내용은 이 글의 전체 내용입니다. 이미지 회전의 특수 효과를 얻는 데 모든 사람에게 도움이 되기를 바랍니다.

이미지 회전을 생성하는 순수 HTML5+CSS3

관련 기사