使用css3制作旋转动画的思路
首先我们需要使用div画出这8个图标，我们通过观察可以发现，8个图标可以分成4组div，并且可以将圆形等分为8份，这样可以方便我们随后的操作。我是每两个垂直对应的圆就放在同一个div中，令其旋转起来需要使用css3中的旋转属性：第一个div先保持不动，第二个div旋转45°，以此类推，下一个div都要比上一个div多旋转45°就可以实现布局。
使用css3制作旋转动画的步骤
步骤一：画出8个图标设置成4个div
<divclass="out_circle">
<divclass="slide"></div>
<divclass="nav_circler1">
<divclass="img_topimg">
<imgsrc="images/menu.png">
<ahref="#">产品中心</a>
</div>
<divclass="img_bottomimg">
<imgsrc="images/menu_01.png">
<ahref="#">官方网站</a>
</div>
</div>
<divclass="nav_circler2">
<divclass="img_topimg">
<imgsrc="images/menu_02.png">
<ahref="#">代理查询</a>
</div>
<divclass="img_bottomimg">
<imgsrc="images/menu_03.png">
<ahref="#">后台登录</a>
</div>
</div>
<divclass="nav_circler3">
<divclass="img_topimg">
<imgsrc="images/menu_04.png">
<ahref="#">公司资质</a>
</div>
<divclass="img_bottomimg">
<imgsrc="images/menu_05.png">
<ahref="#">质检报告</a>
</div>
</div>
<divclass="nav_circler4">
<divclass="img_topimg">
<imgsrc="images/menu_06.png">
<ahref="#">代理登录</a>
</div>
<divclass="img_bottomimg">
<imgsrc="images/menu_07.png">
<ahref="#">代理授权</a>
</div>
</div>
</div>
步骤二：使用css3布局
.out_circle{
width:440px;
height:440px;
border:1pxsolid;
border-radius:50%;
margin:30pxauto0auto;
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_topimg,.img_bottomimg{
width:77px;
height:77px;
}
.img_top,.img_bottom{
position:relative;
z-index:1;
}
.nav_circle.imga{
position:absolute;
top:10px;
left:94px;
width:52px;
}
.r1{
transform:rotate(0deg)skew(0deg)scale(1);
-ms-transform:rotate(0deg)skew(0deg)scale(1);/*IE9*/
-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:rotate10slinearinfinite;
-webkit-animation:rotate10slinearinfinite;
-moz-animation:rotate10slinearinfinite;
-o-animation:rotate10slinearinfinite;
}
.r1.img{
transform:rotate(0deg)skew(0deg)scale(1);
-ms-transform:rotate(0deg)skew(0deg)scale(1);/*IE9*/
-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_c110slinearinfinite;
-webkit-animation:rotate_c110slinearinfinite;
}
.r2{
transform:rotate(45deg)skew(0deg)scale(1);
-ms-transform:rotate(45deg)skew(0deg)scale(1);/*IE9*/
-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:rotatef10slinearinfinite;
-webkit-animation:rotatef10slinearinfinite;
-moz-animation:rotatef10slinearinfinite;
-o-animation:rotatef10slinearinfinite;
}
.r2.img{
transform:rotate(-45deg)skew(0deg)scale(1);
-ms-transform:rotate(-45deg)skew(0deg)scale(1);/*IE9*/
-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_c210slinearinfinite;
-webkit-animation:rotate_c210slinearinfinite;
}
.r3{
transform:rotate(90deg)skew(0deg)scale(1);
-ms-transform:rotate(90deg)skew(0deg)scale(1);/*IE9*/
-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:rotates10slinearinfinite;
-webkit-animation:rotates10slinearinfinite;
-moz-animation:rotates10slinearinfinite;
-o-animation:rotates10slinearinfinite;
}
.r3.img{
transform:rotate(-90deg)skew(0deg)scale(1);
-ms-transform:rotate(-90deg)skew(0deg)scale(1);/*IE9*/
-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_c310slinearinfinite;
-webkit-animation:rotate_c310slinearinfinite;
}
.r4{
transform:rotate(135deg)skew(0deg)scale(1);
-ms-transform:rotate(135deg)skew(0deg)scale(1);/*IE9*/
-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:rotatet20slinearinfinite;
-webkit-animation:rotatet10slinearinfinite;
-moz-animation:rotatet10slinearinfinite;
-o-animation:rotatet10slinearinfinite;
}
.r4.img{
transform:rotate(-135deg)skew(0deg)scale(1);
-ms-transform:rotate(-135deg)skew(0deg)scale(1);/*IE9*/
-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_c410slinearinfinite;
-webkit-animation:rotate_c410slinearinfinite;
}
步骤三：为每个div创建动画
第一个div
@keyframesrotate{
0%{
transform:rotate(0deg)skew(0deg)scale(1);
-ms-transform:rotate(0deg)skew(0deg)scale(1);/*IE9*/
-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);/*IE9*/
-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
@keyframesrotatef{
0%{
transform:rotate(45deg)skew(0deg)scale(1);
-ms-transform:rotate(45deg)skew(0deg)scale(1);/*IE9*/
-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);/*IE9*/
-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
@keyframesrotates{
0%{
transform:rotate(90deg)skew(0deg)scale(1);
-ms-transform:rotate(90deg)skew(0deg)scale(1);/*IE9*/
-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);/*IE9*/
-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);
}
}
第四个div
@keyframesrotatet{
0%{
transform:rotate(135deg)skew(0deg)scale(1);
-ms-transform:rotate(135deg)skew(0deg)scale(1);/*IE9*/
-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);
}
100%{
transform:rotate(495deg)skew(0deg)scale(1);
-ms-transform:rotate(495deg)skew(0deg)scale(1);/*IE9*/
-moz-transform:rotate(495deg)skew(0deg)scale(1);/*Firefox*/
-webkit-transform:rotate(495deg)skew(0deg)scale(1);/*SafariºÍChrome*/
-o-transform:rotate(495deg)skew(0deg)scale(1);
}
}
注意
因为css3的旋转属性并不是所有浏览器都可以兼容的，所以在创建完之后要给相应的类添加动画名。
本文转载自中文网
本文转载自中文网
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c55298.shtml
