网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线：028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

查看费用明细

建站知识

当前位置：首页 > 建站知识

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怎么制作圆形旋转动画”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!


分享文章：css3怎么制作圆形旋转动画
文章路径：http://bjjierui.cn/article/geepdh.html

其他资讯

Copyright © 2012-2020 网创优客信息咨询 版权所有 蜀ICP备2023009085号-7
手机:13518219792 QQ:631063699 地址：成都市青羊区锣锅巷31号 邮编:610000 Email:wh@cdxwcx.com
成都网络公司-网创优客建站品牌专注成都网站建设、成都网站设计服务，为成都公司建设高品质的网站