简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  CSS3를 사용하여 원형 회전 애니메이션을 만드는 방법(전체 코드 첨부)

CSS3를 사용하여 원형 회전 애니메이션을 만드는 방법(전체 코드 첨부)

坏嘻嘻
坏嘻嘻원래의
2018-09-26 09:59:217754검색

CSS3의 광범위한 적용으로 사람들은 점점 더 다양한 웹 페이지를 탐색하고 있으며 프런트 엔드 개발자는 인간과 컴퓨터의 상호 작용 및 사용자 경험에 점점 더 많은 관심을 기울이고 있습니다. 시작 부분의 텍스트부터 이후의 사진, 그리고 현재 애니메이션 특수 효과까지 사람들이 웹 페이지에 대해 점점 더 까다로워지고 있으므로 오늘은 CSS3를 사용하여 회전 애니메이션을 만드는 방법을 보여 드리겠습니다. 이 문서에서는 CSS3를 사용하여 회전 애니메이션을 만드는 방법을 소개하고 특정 단계에 중점을 두고 있습니다. 이 문서의 내용은 간단하므로 이 문서에서 뭔가를 얻을 수 있기를 바랍니다.

예제는 그림에 나와 있습니다

CSS3를 사용하여 원형 회전 애니메이션을 만드는 방법(전체 코드 첨부)

Css3를 사용하여 회전 애니메이션을 만드는 아이디어

먼저 div를 사용하여 이 8개의 아이콘을 찾을 수 있습니다. 관찰을 통해 8개의 아이콘이 있다는 것을 알 수 있습니다. 이는 4개의 div 그룹으로 나눌 수 있고 원은 8개의 동일한 부분으로 나눌 수 있으므로 후속 작업이 용이해집니다. 두 개의 수직 대응 원을 동일한 div에 배치하려면 CSS3의 회전 속성을 사용해야 합니다. 첫 번째 div는 고정되어 있고 두 번째 div는 45° 회전해야 합니다. ° 레이아웃을 달성하기 위해 이전 div보다 더 많은 것입니다.

css3을 사용하여 회전 애니메이션을 만드는 단계

1단계: 8개의 아이콘을 그리고 4개의 div로 설정

<div class="out_circle">
    <div class="slide"></div>
    <div class="nav_circle r1">
        <div class="img_top img">
            <img  src="images/menu.png" alt="CSS3를 사용하여 원형 회전 애니메이션을 만드는 방법(전체 코드 첨부)" >
            <a href="#">产品中心</a>
        </div>
        <div class="img_bottom img" >
            <img  src="images/menu_01.png" alt="CSS3를 사용하여 원형 회전 애니메이션을 만드는 방법(전체 코드 첨부)" >
            <a href="#">官方网站</a>
        </div>
    </div>
    <div class="nav_circle r2">
        <div class="img_top img">
            <img  src="images/menu_02.png" alt="CSS3를 사용하여 원형 회전 애니메이션을 만드는 방법(전체 코드 첨부)" >
            <a href="#">代理查询</a>
        </div>
        <div class="img_bottom img" >
            <img  src="images/menu_03.png" alt="CSS3를 사용하여 원형 회전 애니메이션을 만드는 방법(전체 코드 첨부)" >
            <a href="#">后台登录</a>
        </div>
    </div>
    <div class="nav_circle r3">
        <div class="img_top img">
            <img  src="images/menu_04.png" alt="CSS3를 사용하여 원형 회전 애니메이션을 만드는 방법(전체 코드 첨부)" >
            <a href="#">公司资质</a>
        </div>
        <div class="img_bottom img" >
            <img  src="images/menu_05.png" alt="CSS3를 사용하여 원형 회전 애니메이션을 만드는 방법(전체 코드 첨부)" >
            <a href="#">质检报告</a>
        </div>
    </div>
    <div class="nav_circle r4">
        <div class="img_top img">
            <img  src="images/menu_06.png" alt="CSS3를 사용하여 원형 회전 애니메이션을 만드는 방법(전체 코드 첨부)" >
            <a href="#">代理登录</a>
        </div>
        <div class="img_bottom img" >
            <img  src="images/menu_07.png" alt="CSS3를 사용하여 원형 회전 애니메이션을 만드는 방법(전체 코드 첨부)" >
            <a href="#">代理授权</a>
        </div>
    </div>
</div>

2단계: css3 레이아웃 사용

rr 리

3단계: 각 div에 대한 애니메이션 만들기

첫 번째 div

 .out_circle{
            width:440px;
            height:440px;
            border:1px solid;
            border-radius:50%; 
            margin:30px auto 0 auto;
            position: relative;
            }
            .nav_circle{
            width:110px;
            height:440px;
            float:left;
            position:absolute;
            top:0;
            left:169px; 
            text-align:center;
            }
            .img_top{
            top:-27px;
            -webkit-transform: rotate(0deg);
        }
        .img_bottom{
            top:316px;
            -webkit-transform: rotate(0deg);
        }
        .img_top img,.img_bottom  img{
            width:77px;
            height: 77px;
        }
         .img_top,.img_bottom{
            position: relative;
            z-index:1;
        }
        .nav_circle .img a{
            position: absolute;
            top:10px;
            left:94px;
            width: 52px;
        }
        .r1{
            transform:rotate(0deg) skew(0deg) scale(1);
            -ms-transform:rotate(0deg) skew(0deg) scale(1);     /* IE 9 */
            -moz-transform:rotate(0deg) skew(0deg) scale(1);     /* Firefox */
            -webkit-transform:rotate(0deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
            -o-transform:rotate(0deg) skew(0deg) scale(1); 
            animation: rotate 10s linear infinite;
            -webkit-animation:rotate 10s linear infinite;
            -moz-animation:rotate 10s linear infinite;
            -o-animation:rotate 10s linear infinite;
        }
        .r1 .img{
            transform:rotate(0deg) skew(0deg) scale(1);
            -ms-transform:rotate(0deg) skew(0deg) scale(1);     /* IE 9 */
            -moz-transform:rotate(0deg) skew(0deg) scale(1);     /* Firefox */
            -webkit-transform:rotate(0deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
            -o-transform:rotate(0deg) skew(0deg) scale(1); 
            animation:rotate_c1 10s linear infinite;
            -webkit-animation:rotate_c1 10s linear infinite;
        }
        .r2{
            transform:rotate(45deg) skew(0deg) scale(1);
            -ms-transform:rotate(45deg) skew(0deg) scale(1);     /* IE 9 */
            -moz-transform:rotate(45deg) skew(0deg) scale(1);     /* Firefox */
            -webkit-transform:rotate(45deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
            -o-transform:rotate(45deg) skew(0deg) scale(1); 
            animation: rotatef 10s linear infinite;
            -webkit-animation:rotatef 10s linear infinite;
            -moz-animation:rotatef 10s linear infinite;
            -o-animation:rotatef 10s linear infinite;
        }
        .r2 .img {
            transform:rotate(-45deg) skew(0deg) scale(1);
            -ms-transform:rotate(-45deg) skew(0deg) scale(1);     /* IE 9 */
            -moz-transform:rotate(-45deg) skew(0deg) scale(1);     /* Firefox */
            -webkit-transform:rotate(-45deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
            -o-transform:rotate(-45deg) skew(0deg) scale(1); 
            animation:rotate_c2 10s linear infinite;
            -webkit-animation:rotate_c2 10s linear infinite;
        }
        .r3 {
            transform:rotate(90deg) skew(0deg) scale(1);
            -ms-transform:rotate(90deg) skew(0deg) scale(1);     /* IE 9 */
            -moz-transform:rotate(90deg) skew(0deg) scale(1);     /* Firefox */
            -webkit-transform:rotate(90deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
            -o-transform:rotate(90deg) skew(0deg) scale(1);
            animation: rotates 10s linear infinite;
            -webkit-animation:rotates 10s linear infinite;
            -moz-animation:rotates 10s linear infinite;
            -o-animation:rotates 10s linear infinite;
        }
        .r3 .img{
            transform:rotate(-90deg) skew(0deg) scale(1);
            -ms-transform:rotate(-90deg) skew(0deg) scale(1);     /* IE 9 */
            -moz-transform:rotate(-90deg) skew(0deg) scale(1);     /* Firefox */
            -webkit-transform:rotate(-90deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
            -o-transform:rotate(-90deg) skew(0deg) scale(1); 
            animation:rotate_c3 10s linear infinite;
            -webkit-animation:rotate_c3 10s linear infinite;
        }
        .r4{
            transform:rotate(135deg) skew(0deg) scale(1);
            -ms-transform:rotate(135deg) skew(0deg) scale(1);     /* IE 9 */
            -moz-transform:rotate(135deg) skew(0deg) scale(1);     /* Firefox */
            -webkit-transform:rotate(135deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
            -o-transform:rotate(135deg) skew(0deg) scale(1); 
            animation: rotatet 20s linear infinite;
            -webkit-animation:rotatet 10s linear infinite;
            -moz-animation:rotatet 10s linear infinite;
            -o-animation:rotatet 10s linear infinite;
        }
        .r4 .img{
            transform:rotate(-135deg) skew(0deg) scale(1);
            -ms-transform:rotate(-135deg) skew(0deg) scale(1);     /* IE 9 */
            -moz-transform:rotate(-135deg) skew(0deg) scale(1);     /* Firefox */
            -webkit-transform:rotate(-135deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
            -o-transform:rotate(-135deg) skew(0deg) scale(1); 
            animation:rotate_c4 10s linear infinite;
            -webkit-animation:rotate_c4 10s linear infinite;
        }

두 번째 div

@keyframes rotate{
            0%{
                transform:rotate(0deg) skew(0deg) scale(1);
                -ms-transform:rotate(0deg) skew(0deg) scale(1);     /* IE 9 */
                -moz-transform:rotate(0deg) skew(0deg) scale(1);     /* Firefox */
                -webkit-transform:rotate(0deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
                -o-transform:rotate(0deg) skew(0deg) scale(1); 
            }
            100%{
                transform:rotate(360deg) skew(0deg) scale(1);
                -ms-transform:rotate(360deg) skew(0deg) scale(1);     /* IE 9 */
                -moz-transform:rotate(360deg) skew(0deg) scale(1);     /* Firefox */
                -webkit-transform:rotate(360deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
                -o-transform:rotate(360deg) skew(0deg) scale(1); 
            }
        }

세 번째 div

@keyframes rotatef{
            0%{
                transform:rotate(45deg) skew(0deg) scale(1);
                -ms-transform:rotate(45deg) skew(0deg) scale(1);     /* IE 9 */
                -moz-transform:rotate(45deg) skew(0deg) scale(1);     /* Firefox */
                -webkit-transform:rotate(45deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
                -o-transform:rotate(45deg) skew(0deg) scale(1); 
            }
            100%{
                transform:rotate(405deg) skew(0deg) scale(1);
                -ms-transform:rotate(405deg) skew(0deg) scale(1);     /* IE 9 */
                -moz-transform:rotate(405deg) skew(0deg) scale(1);     /* Firefox */
                -webkit-transform:rotate(405deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
                -o-transform:rotate(405deg) skew(0deg) scale(1); 
            }
        }

네 번째 div 

@keyframes rotates{
            0%{
                transform:rotate(90deg) skew(0deg) scale(1);
                -ms-transform:rotate(90deg) skew(0deg) scale(1);     /* IE 9 */
                -moz-transform:rotate(90deg) skew(0deg) scale(1);     /* Firefox */
                -webkit-transform:rotate(90deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
                -o-transform:rotate(90deg) skew(0deg) scale(1); 
            }
            100%{
                transform:rotate(450deg) skew(0deg) scale(1);
                -ms-transform:rotate(450deg) skew(0deg) scale(1);     /* IE 9 */
                -moz-transform:rotate(450deg) skew(0deg) scale(1);     /* Firefox */
                -webkit-transform:rotate(450deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
                -o-transform:rotate(450deg) skew(0deg) scale(1); 
            }
        }

참고

CSS3의 회전 속성은 모든 브라우저와 호환되지 않기 때문에 생성 후 해당 클래스에 애니메이션 이름을 추가해야 합니다.

위 내용은 CSS3를 사용하여 원형 회전 애니메이션을 만드는 방법(전체 코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS3의 포인터 이벤트 속성 소개다음 기사：CSS3의 포인터 이벤트 속성 소개

관련 기사

더보기