CSS3에서 원형 회전 효과를 얻는 방법

방법: 1. "border-radius:100%"를 사용하여 요소를 원형으로 설정합니다. 2. "@keyframes 이름 {100%{transform:rotate(360deg);}}"를 사용하여 애니메이션을 설정합니다. . "animation:Name time"을 사용하면 애니메이션 효과를 요소에 바인딩할 수 있습니다.

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

css3에서 원형 회전 효과를 얻는 방법

border-radius를 사용하면 요소 외부 테두리의 둥근 모서리를 설정할 수 있습니다. 하나의 반지름을 사용하면 원을 결정하고, 두 개의 반지름을 사용하면 타원을 결정합니다. 이(타원형) 원과 테두리의 교차점은 둥근 모서리 효과를 만듭니다.

@keyframes 규칙을 사용하면 애니메이션을 만들 수 있습니다.

한 CSS 스타일 설정에서 다른 CSS 스타일 설정으로 점진적으로 변경하여 애니메이션을 만듭니다.

애니메이션 프로세스 중에 CSS 스타일 설정을 여러 번 변경할 수 있습니다.

% 또는 키워드 "from" 및 "to"를 사용하여 변경 사항이 발생하는 시점을 지정합니다. 이는 0%~100%와 동일합니다.

0%는 애니메이션이 시작되는 시점이고, 100%는 애니메이션이 끝나는 시점입니다.

최상의 브라우저 지원을 위해서는 항상 0%와 100%에 대한 선택기를 정의해야 합니다.

구문은 다음과 같습니다.

@keyframes animationname {keyframes-selector {css-styles;}}

애니메이션 속성 구문은 다음과 같습니다.

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

• animation-name 선택기에 바인딩할 키프레임의 이름을 지정합니다.

• animation-duration 애니메이션이 몇 초 또는 밀리초인지 지정합니다. 소요 시간

• animation-timing-function 애니메이션이 한 주기를 완료하는 방법을 설정합니다.

• animation-delay 애니메이션이 시작되기 전 지연 간격을 설정합니다.

• animation-iteration-count 애니메이션이 재생되는 횟수를 정의합니다.

• animation-direction 애니메이션을 차례로 역방향으로 재생할지 여부를 지정합니다.

• animation-fill-mode는 애니메이션이 재생되지 않을 때(애니메이션이 완료될 때 또는 애니메이션 재생이 시작되기 전에 지연이 있을 때) 요소에 적용할 스타일을 지정합니다.

• animation-play-state 애니메이션이 실행 중인지 일시 중지되었는지 지정합니다.

예제는 다음과 같습니다.

     
  
 这是一个圆 
 

  

출력 결과:

(학습 영상 공유:css 영상 튜토리얼)

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