13518219792

NEWS

网站建设资讯

css3怎么制作圆形旋转动画

这篇文章主要介绍了css3怎么制作圆形旋转动画，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

成都创新互联专注于玉田企业网站建设,响应式网站建设,商城系统网站开发。玉田网站建设公司,为玉田等地区提供建站服务。全流程按需网站开发，专业设计，全程项目跟踪，成都创新互联专业和态度为您提供的服务

使用css3制作旋转动画的步骤

步骤一：画出8个图标设置成4个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的旋转属性并不是所有浏览器都可以兼容的，所以在创建完之后要给相应的类添加动画名。

感谢你能够认真阅读完这篇文章，希望小编分享的“css3怎么制作圆形旋转动画”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!