天网旋转

css/index.css

@@ -569,10 +569,10 @@
 #skynet{
     height: 600px;
     width: 1920px;
-    background: url(../images/skynet_img.png)no-repeat center;
+    /* background: url(../images/skynet_img.png)no-repeat center; */
     margin: 40px auto;
     text-align: center;
-
+    position: relative;
 
     display: -webkit-box;
     -webkit-box-orient: horizontal;
@@ -599,6 +599,65 @@
     box-pack: center;
     box-align: center;
 }
+@-webkit-keyframes rotation{
+    from {-webkit-transform: rotate(0deg);}
+    to {-webkit-transform: rotate(360deg);}
+    }
+@-webkit-keyframes rotations{
+    from {-webkit-transform: rotate(360deg);}
+    to {-webkit-transform: rotate(0deg);}
+    }
+#skynet .first{
+    position: absolute;
+    width: 580px;
+    height: 580px;
+    background: url(../images/1.png)no-repeat;
+    background-size:100% 100%; 
+    top:50%;    
+    left: 50%;  
+    margin-top: -290px;    
+    margin-left: -290px;
+    text-align: center;
+    -webkit-transform: rotate(360deg);
+    animation: rotation 13s linear infinite;
+    -moz-animation: rotation 13s linear infinite;
+    -webkit-animation: rotation 13s linear infinite;
+    -o-animation: rotation 13s linear infinite; 
+}
+#skynet .second{
+    position: absolute;
+    width: 480px;
+    height: 480px;
+    background: url(../images/2.png)no-repeat;
+    background-size:100% 100%; 
+    top:50%;    
+    left: 50%;  
+    margin-top: -240px;    
+    margin-left: -240px;
+    text-align: center;
+    -webkit-transforms: rotate(0deg);
+    animation: rotation 11s linear infinite;
+    -moz-animation: rotation 11s linear infinite;
+    -webkit-animation: rotation 11s linear infinite;
+    -o-animation: rotation 11s linear infinite; 
+}
+#skynet .third{
+    position: absolute;
+    width: 520px;
+    height: 520px;
+    background: url(../images/3.png)no-repeat;
+    background-size:100% 100%; 
+    top:50%;    
+    left: 50%;  
+    margin-top: -260px;    
+    margin-left: -260px;
+    text-align: center;
+    -webkit-transform: rotate(360deg);
+    animation: rotations 13s linear infinite;
+    -moz-animation: rotations 13s linear infinite;
+    -webkit-animation: rotations 13s linear infinite;
+    -o-animation: rotations 13s linear infinite; 
+}
 #skynet .test{
     width: 380px;
     height: 380px;

index.html

@@ -230,6 +230,9 @@
         </div>
     </div> 
     <div id="skynet" class="wow">
+        <div class="first"></div>
+        <div class="second"></div>
+        <div class="third"></div>
         <div class="test">
             <div class="donkey">天网监察体系</div>
             <div class="sunspot">稽核中心 +MIS</div>