CSS3를 사용하여 원형 회전 애니메이션을 만드는 방법(전체 코드 첨부)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

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

坏嘻嘻

Sep 26, 2018 am 09:59 AM

css3회전 애니메이션

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="/static/imghwm/default1.png"  data-src="images/menu.png"  class="lazy"   alt="CSS3를 사용하여 원형 회전 애니메이션을 만드는 방법(전체 코드 첨부)" >
            <a href="#">产品中心</a>
        </div>
        <div class="img_bottom img" >
            <img  src="/static/imghwm/default1.png"  data-src="images/menu_01.png"  class="lazy"   alt="CSS3를 사용하여 원형 회전 애니메이션을 만드는 방법(전체 코드 첨부)" >
            <a href="#">官方网站</a>
        </div>
    </div>
    <div class="nav_circle r2">
        <div class="img_top img">
            <img  src="/static/imghwm/default1.png"  data-src="images/menu_02.png"  class="lazy"   alt="CSS3를 사용하여 원형 회전 애니메이션을 만드는 방법(전체 코드 첨부)" >
            <a href="#">代理查询</a>
        </div>
        <div class="img_bottom img" >
            <img  src="/static/imghwm/default1.png"  data-src="images/menu_03.png"  class="lazy"   alt="CSS3를 사용하여 원형 회전 애니메이션을 만드는 방법(전체 코드 첨부)" >
            <a href="#">后台登录</a>
        </div>
    </div>
    <div class="nav_circle r3">
        <div class="img_top img">
            <img  src="/static/imghwm/default1.png"  data-src="images/menu_04.png"  class="lazy"   alt="CSS3를 사용하여 원형 회전 애니메이션을 만드는 방법(전체 코드 첨부)" >
            <a href="#">公司资质</a>
        </div>
        <div class="img_bottom img" >
            <img  src="/static/imghwm/default1.png"  data-src="images/menu_05.png"  class="lazy"   alt="CSS3를 사용하여 원형 회전 애니메이션을 만드는 방법(전체 코드 첨부)" >
            <a href="#">质检报告</a>
        </div>
    </div>
    <div class="nav_circle r4">
        <div class="img_top img">
            <img  src="/static/imghwm/default1.png"  data-src="images/menu_06.png"  class="lazy"   alt="CSS3를 사용하여 원형 회전 애니메이션을 만드는 방법(전체 코드 첨부)" >
            <a href="#">代理登录</a>
        </div>
        <div class="img_bottom img" >
            <img  src="/static/imghwm/default1.png"  data-src="images/menu_07.png"  class="lazy"   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으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

드림위버 CS6

시각적 웹 개발 도구

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.