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

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

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

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

css는 div

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

<div id="xuanzhun" style="width: 30px; height: 30px; background-color: aquamarine;">

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의 지속적인 회전을 달성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!