CSS를 사용하여 div의 지속적인 회전을 달성하는 방법-CSS 튜토리얼-php.cn

Div의 지속적인 회전을 구현하는 Css 방법: 먼저 div 요소를 만들고 id 값을 지정한 다음 인라인 스타일을 사용하여 div에 일부 스타일을 추가한 다음 "@keyframes" 규칙을 사용하여 애니메이션 회전을 만듭니다. 마지막으로 div Just 애니메이션을 지정합니다.

CSS를 사용하여 div의 지속적인 회전을 달성하는 방법

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

관련 권장사항: "css 비디오 튜토리얼"

css는 div

1의 지속적인 회전을 실현합니다. 먼저 div 요소를 만들고 ID 값 xuanzhuan을 지정하고 인라인 스타일을 사용하여 몇 가지 스타일을 추가합니다. div.

로그인 후 복사

CSS를 사용하여 div의 지속적인 회전을 달성하는 방법

2. 그런 다음 @keyframes 규칙을 사용하여 애니메이션 회전

@-webkit-keyframes rotate{ from{-webkit-transform: rotate(0deg)} to{-webkit-transform: rotate(360deg)} } @-moz-keyframes rotate{ from{-moz-transform: rotate(0deg)} to{-moz-transform: rotate(359deg)} } @-o-keyframes rotate{ from{-o-transform: rotate(0deg)} to{-o-transform: rotate(359deg)} } @keyframes rotate{ from{transform: rotate(0deg)} to{transform: rotate(359deg)} }

로그인 후 복사

3을 만듭니다. 마지막으로 div에 애니메이션을 지정합니다.

#xuanzhun{ -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s; -webkit-animation: rotate 3s linear infinite; -moz-animation: rotate 3s linear infinite; -o-animation: rotate 3s linear infinite; animation: rotate 3s linear infinite; }

로그인 후 복사

효과:

CSS를 사용하여 div의 지속적인 회전을 달성하는 방법