本文由 DTcms素材网 – DT素材网 发布，转载请注明出处，如有问题请联系我们！如何使用css3制作圆形旋转动画（附完整代码）
收藏 随着css3的广泛应用，人们浏览的web网页越来越多元化，而前端开发者也越来越注重人机交互和用户体验。从一开始的文字到后来的图片，以至于现在的动画特效，人们对于网页的要求也越来越挑剔，那么今天给大家展示一下如何使用css3制作旋转动画。本文在介绍如何使用css3制作旋转动画的基础上，重点探讨了其具体步骤，本文内容紧凑，希望大家可以有所收获。
实例如图所示
使用css3制作旋转动画的思路
首先我们需要使用div画出这8个图标，我们通过观察可以发现，8个图标可以分成4组div，并且可以将圆形等分为8份，这样可以方便我们随后的操作。我是每两个垂直对应的圆就放在同一个div中，令其旋转起来需要使用css3中的旋转属性：第一个div先保持不动，第二个div旋转45°，以此类推，下一个div都要比上一个div多旋转45°就可以实现布局。
使用css3制作旋转动画的步骤
步骤一：画出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"> <a href="#">产品中心</a> </div> <div class="img_bottom img" > <img src="images/menu_01.png"> <a href="#">官方网站</a> </div> </div> <div class="nav_circle r2"> <div class="img_top img"> <img src="images/menu_02.png"> <a href="#">代理查询</a> </div> <div class="img_bottom img" > <img src="images/menu_03.png"> <a href="#">后台登录</a> </div> </div> <div class="nav_circle r3"> <div class="img_top img"> <img src="images/menu_04.png"> <a href="#">公司资质</a> </div> <div class="img_bottom img" > <img src="images/menu_05.png"> <a href="#">质检报告</a> </div> </div> <div class="nav_circle r4"> <div class="img_top img"> <img src="images/menu_06.png"> <a href="#">代理登录</a> </div> <div class="img_bottom img" > <img src="images/menu_07.png"> <a href="#">代理授权</a> </div> </div> </div>
步骤二：使用css3布局
.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 oí 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 oí 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 oí 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 oí 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 oí 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 oí 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 oí 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 oí Chrome */ -o-transform:rotate(-135deg) skew(0deg) scale(1); animation:rotate_c4 10s linear infinite; -webkit-animation:rotate_c4 10s linear infinite; }
步骤三：为每个div创建动画
第一个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 oí 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 oí 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 oí 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 oí 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 oí 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 oí Chrome */ -o-transform:rotate(450deg) skew(0deg) scale(1); } }
第四个div
@keyframes rotatet{ 0%{ 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 oí 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); /* IE 9 */ -moz-transform:rotate(495deg) skew(0deg) scale(1); /* Firefox */ -webkit-transform:rotate(495deg) skew(0deg) scale(1); /* Safari oí Chrome */ -o-transform:rotate(495deg) skew(0deg) scale(1); } }
注意
因为css3的旋转属性并不是所有浏览器都可以兼容的，所以在创建完之后要给相应的类添加动画名。
