CSS3 2D模拟实现摩天轮旋转效果

先看效果图：

由于上传的大小原因，只能录制成这种效果，原图是无限循环的转圈。

代码：

  
  
  
      
      
      
    *{margin:0;padding:0;}  
    .image{width:80px;height:80px;}  
    .image1{width:620px;height:620px;}  
    .div1{position:relative;margin:10px auto;width:638px;  
     animation:run 20s linear infinite;  
     -webkit-animation:run 20s linear infinite;  
     -moz-animation:run 20s linear infinite;  
     -o-animation:run 20s linear infinite;  
 }  
    img:nth-child(2){  
     position:absolute;top:25px;left:270px;opacity:0.7;  
     animation:run2 20s linear infinite;  
     -webkit-animation:run2 20s linear infinite;  
     -moz-animation:run2 20s linear infinite;  
     -o-animation:run2 20s linear infinite;  
     transform-origin:top center;  
     -webkit-transform-origin:top center;  
     -moz-transform-origin:top center;  
     -o-transform-origin:top center;  
 }  
 img:nth-child(3){  
     position:absolute;top:580px;left:270px;opacity:0.7;  
     animation:run2 20s linear infinite;  
     -webkit-animation:run2 20s linear infinite;  
     -moz-animation:run2 20s linear infinite;  
     -o-animation:run2 20s linear infinite;  
     transform-origin:top center;  
     -webkit-transform-origin:top center;  
     -moz-transform-origin:top center;  
     -o-transform-origin:top center;  
 }  
 img:nth-child(4){  
     position:absolute;top:300px;left:550px;opacity:0.7;  
     animation:run2 20s linear infinite;  
     -webkit-animation:run2 20s linear infinite;  
     -moz-animation:run2 20s linear infinite;  
     -o-animation:run2 20s linear infinite;  
     transform-origin:top center;  
     -webkit-transform-origin:top center;  
     -moz-transform-origin:top center;  
     -o-transform-origin:top center;  
 }  
 img:nth-child(5){  
     position:absolute;top:300px;left:0px;opacity:0.7;  
     animation:run2 20s linear infinite;  
     -webkit-animation:run2 20s linear infinite;  
     -moz-animation:run2 20s linear infinite;  
     -o-animation:run2 20s linear infinite;  
     transform-origin:top center;  
     -webkit-transform-origin:top center;  
     -moz-transform-origin:top center;  
     -o-transform-origin:top center;  
 }  
 @keyframes run  
 {  
     0%{transform:rotate(0deg)}  
     100%{transform:rotate(360deg)}    
 }  
 @-webkit-keyframes run  
 {  
     0%{-webkit-transform:rotate(0deg)}  
     100%{-webkit-transform:rotate(360deg)}    
 }  
 @-moz-keyframes run  
 {  
     0%{-moz-transform:rotate(0deg)}  
     100%{-moz-transform:rotate(360deg)}   
 }  
 @-o-keyframes run  
 {  
     0%{-o-transform:rotate(0deg)}  
     100%{-o-transform:rotate(360deg)}     
 }  
   
 @keyframes run2  
 {  
     0%{transform:rotate(0deg)}  
     100%{transform:rotate(-360deg)}   
 }  
 @-webkit-keyframes run2  
 {  
     0%{-webkit-transform:rotate(0deg)}  
     100%{-webkit-transform:rotate(-360deg)}   
 }  
 @-moz-keyframes run2  
 {  
     0%{-moz-transform:rotate(0deg)}  
     100%{-moz-transform:rotate(-360deg)}      
 }  
 @-o-keyframes run2  
 {  
     0%{-o-transform:rotate(0deg)}  
     100%{-o-transform:rotate(-360deg)}    
 }  
      
  
  
      
 

  
 

  
 

  
 

  
 

   
   
      
  

 摩天轮原图：

注释：transform-origin 属性允许您改变被转换元素的位置。

这个属性主要的作用就是选择一个位置，然后绕着这个位置旋转。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。