집 >웹 프론트엔드 >CSS 튜토리얼 >CSS에서 회전 애니메이션 효과를 얻는 방법

CSS에서 회전 애니메이션 효과를 얻는 방법

WBOY원래의: 2021-12-09 15:08:4522695검색

방법: 1. "element {animation:name time unlimited}" 문을 사용하여 애니메이션을 요소에 바인딩합니다. 2. "@keyframes name {100%{transform:rotate(rotation angle)}}" 문을 사용하여 다음을 수행합니다. 요소의 지속적인 회전 효과를 얻기 위해 애니메이션 작업의 회전을 설정합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css에서 회전 애니메이션 효과를 얻는 방법

css에서는 애니메이션 속성을 사용하여 애니메이션을 요소에 바인딩할 수 있습니다. 애니메이션 속성은 애니메이션의 지속 시간과 수를 제어할 수 있습니다.

animation: name duration timing-function delay iteration-count direction;

where:

CSS에서 회전 애니메이션 효과를 얻는 방법

속성 값을 "infinite"로 설정하면 애니메이션이 무한히 재생된다고 규정합니다. 요소에 회전 애니메이션을 바인딩하면 계속 회전할 수 있습니다.

그런 다음 @keyframes 규칙을 통해 애니메이션의 회전 동작을 설정합니다.

예제는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:100px;
            height:100px;
            background-color:pink;
            animation:fadenum 5s infinite;
        }
        @keyframes fadenum{
   100%{transform:rotate(360deg);}
}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

출력 결과:

CSS에서 회전 애니메이션 효과를 얻는 방법

(학습 영상 공유:

css 영상 튜토리얼)

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

html5 css css3 transform animation

성명：

이전 기사：CSS에서 입력 상자 스타일을 제거하는 방법다음 기사：CSS에서 입력 상자 스타일을 제거하는 방법