温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css3怎么制作圆形旋转动画

发布时间:2022-02-24 14:38:12 来源:亿速云 阅读:192 作者:小新 栏目:web开发

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI