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 레이아웃 사용
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!