CSS3를 사용하여 원형 회전 애니메이션을 만드는 방법(전체 코드 첨부)
- 坏嘻嘻원래의
- 2018-09-26 09:59:217772검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS3의 포인터 이벤트 속성 소개다음 기사：CSS3의 포인터 이벤트 속성 소개