408249787 há 2 anos atrás
pai
commit
f92d0ba8c3
1 ficheiros alterados com 20 adições e 24 exclusões
  1. 20 24
      src/views/statisticView/Main.vue

+ 20 - 24
src/views/statisticView/Main.vue

@@ -163,14 +163,14 @@ export default {
 }
         .planet {
             position: absolute;
-            left:390px;
+            left:350px;
             top:30px;
             border: 5px solid #13c2c2;
             width: 1200px;
             height: 1200px;
-            transform: scaleY(0.5) rotateZ(30deg);
             border-radius: 50%;
             transform-style: preserve-3d;
+            animation: planet-rotate 16s linear infinite;
 
         }
 
@@ -179,12 +179,14 @@ export default {
             height: 200px;
             position: absolute;
             border-radius: 50%;
-            left: calc(50% - 25px);
-            top: -100px;
+            left: calc(50% - 120px);
+            top: -120px;
             text-align: center;
             line-height: 200px;
             color: #13c2c2;
             transform: rotateZ(-30deg) scaleY(2);
+            animation: self-rotate 16s linear infinite;
+
             .title {
               position: absolute;
               top:20px;
@@ -201,49 +203,43 @@ export default {
             }
         }
         .second {
-            left: calc(50% + 450px);
-            top: 400px;
+            left: calc(82% + 27px);
+            top: 180px;
         }
         .third {
-            left: calc(50% + 230px);
-            top: 910px;
+            left: calc(50% + 395px);
+            top: 770px;
         }
         .four {
-            left: calc(50% - 300px);
-            top: 1030px;
+          left: calc(50% - 120px);
+            top: 1110px;
         }
         .five {
-            left: calc(50% - 745px);
-            top: 480px;
+            left: calc(50% - 650px);
+            top: 770px;
         }
         .six {
-            left: calc(50% - 530px);
-            top: 10px;
-        }
-        .planet {
-            animation: planet-rotate 16s linear infinite;
+            left: calc(50% - 635px);
+            top: 180px;
         }
 
-        .ball {
-            animation: self-rotate 16s linear infinite;
-        }
         /* // 公转动画 */
         @keyframes planet-rotate {
         0% {
-            transform:  rotateX(60deg)scaleY(0.5) rotate(0);
+            transform:  rotateX(85deg) rotate(0);
         }
         100% {
-            transform:  rotateX(60deg) scaleY(0.5) rotate(360deg);
+            transform:  rotateX(85deg)  rotate(360deg);
         }
         }
 
         /* // 自转动画 */
         @keyframes self-rotate {
         0% {
-            transform: rotate(0) scaleY(2) rotateX(-60deg);
+            transform: rotate(0) rotateX(-85deg);
         }
         100% {
-            transform: rotate(-360deg) scaleY(2) rotateX(-60deg);
+            transform: rotate(-360deg) rotateX(-85deg);
         }
         }