css3怎么制作圆形旋转动画

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

　　使用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&ordm;&Iacute;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&ordm;&Iacute;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&ordm;&Iacute;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&ordm;&Iacute;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&ordm;&Iacute;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&ordm;&Iacute;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&ordm;&Iacute;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&ordm;&Iacute;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&ordm;&Iacute;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&ordm;&Iacute;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&ordm;&Iacute;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&ordm;&Iacute;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&ordm;&Iacute;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&ordm;&Iacute;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&ordm;&Iacute;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&ordm;&Iacute;Chrome*/

　　-o-transform:rotate(495deg)skew(0deg)scale(1);

　　}

　　}

　　注意

　　因为css3的旋转属性并不是所有浏览器都可以兼容的，所以在创建完之后要给相应的类添加动画名。

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