欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  使用css3制作旋转动画的思路
 
  首先我们需要使用div画出这8个图标,我们通过观察可以发现,8个图标可以分成4组div,并且可以将圆形等分为8份,这样可以方便我们随后的操作。我是每两个垂直对应的圆就放在同一个div中,令其旋转起来需要使用css3中的旋转属性:第一个div先保持不动,第二个div旋转45°,以此类推,下一个div都要比上一个div多旋转45°就可以实现布局。
 
  使用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ºÍ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的旋转属性并不是所有浏览器都可以兼容的,所以在创建完之后要给相应的类添加动画名。









本文转载自中文网
 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c55298.shtml