优化效果

src/assets/scss/pages/yantai-index.scss

@@ -512,3 +512,159 @@
     }
   }
 }
+
+.m-arc {
+  position: absolute;
+  z-index: 60;
+  left: 0;
+  right: 0;
+  top: 650px;
+  margin: 0 auto;
+  width: 160px;
+  height: 160px;
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  -webkit-perspective: 400px;
+  perspective: 400px;
+  pointer-events: none;
+  margin-bottom: 40px;
+
+  .line {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border-bottom: 1.5px solid rgba(#83fbfe, 0.7);
+  }
+
+  .line:first-child {
+    -webkit-animation: rotate1 1.15s linear infinite;
+    animation: rotate1 1.15s linear infinite;
+  }
+
+  .line:nth-child(2) {
+    -webkit-animation: rotate2 1.15s linear infinite;
+    animation: rotate2 1.15s linear infinite;
+  }
+
+  .line:nth-child(3) {
+    -webkit-animation: rotate3 1.15s linear infinite;
+    animation: rotate3 1.15s linear infinite;
+  }
+
+  .line:first-child {
+    -webkit-animation-delay: -0.8s;
+    animation-delay: -0.8s;
+  }
+
+  .line:nth-child(2) {
+    -webkit-animation-delay: -0.4s;
+    animation-delay: -0.4s;
+  }
+
+  .line:nth-child(3) {
+    -webkit-animation-delay: 0s;
+    animation-delay: 0s;
+  }
+
+  @keyframes rotate1 {
+    0% {
+      -webkit-transform: rotateX(35deg) rotateY(-45deg) rotate(0);
+      transform: rotateX(35deg) rotateY(-45deg) rotate(0);
+    }
+
+    to {
+      -webkit-transform: rotateX(35deg) rotateY(-45deg) rotate(1turn);
+      transform: rotateX(35deg) rotateY(-45deg) rotate(1turn);
+    }
+  }
+
+  @keyframes rotate2 {
+    0% {
+      -webkit-transform: rotateX(50deg) rotateY(10deg) rotate(0);
+      transform: rotateX(50deg) rotateY(10deg) rotate(0);
+    }
+
+    to {
+      -webkit-transform: rotateX(50deg) rotateY(10deg) rotate(1turn);
+      transform: rotateX(50deg) rotateY(10deg) rotate(1turn);
+    }
+  }
+
+  @keyframes rotate3 {
+    0% {
+      -webkit-transform: rotateX(35deg) rotateY(55deg) rotate(0);
+      transform: rotateX(35deg) rotateY(55deg) rotate(0);
+    }
+
+    to {
+      -webkit-transform: rotateX(35deg) rotateY(55deg) rotate(1turn);
+      transform: rotateX(35deg) rotateY(55deg) rotate(1turn);
+    }
+  }
+}
+
+.m-arc2 {
+  position: absolute;
+  z-index: 60;
+  left: 0;
+  right: 0;
+  top: 210px;
+  margin: 0 auto;
+  width: 120px;
+  height: 120px;
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  -webkit-perspective: 400px;
+  perspective: 400px;
+  pointer-events: none;
+  margin-bottom: 40px;
+
+  /* 第二个 */
+  .line {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border-bottom: 1px solid rgba(#83fbfe, 0.5);
+    border-top: 1px solid rgba(#83fbfe, 0.5);
+  }
+
+  .line:first-child {
+    -webkit-animation: rotate4 1.15s linear infinite;
+    animation: rotate4 1.15s linear infinite;
+  }
+
+  .line:nth-child(2) {
+    -webkit-animation: rotate5 1.15s linear infinite;
+    animation: rotate5 1.15s linear infinite;
+  }
+
+  @keyframes rotate4 {
+    0% {
+      -webkit-transform: rotateX(55deg) rotateY(-30deg) rotate(0);
+      transform: rotateX(55deg) rotateY(-30deg) rotate(0);
+    }
+
+    to {
+      -webkit-transform: rotateX(55deg) rotateY(-30deg) rotate(1turn);
+      transform: rotateX(55deg) rotateY(-30deg) rotate(1turn);
+    }
+  }
+
+  @keyframes rotate5 {
+    0% {
+      -webkit-transform: rotateX(55deg) rotateY(30deg) rotate(0);
+      transform: rotateX(55deg) rotateY(30deg) rotate(0);
+    }
+
+    to {
+      -webkit-transform: rotateX(55deg) rotateY(30deg) rotate(1turn);
+      transform: rotateX(55deg) rotateY(30deg) rotate(1turn);
+    }
+  }
+}

src/views/pages/yantai-index.vue

@@ -146,7 +146,10 @@
               src="@/assets/img/yantai/index2/platform/right-1.png"
             />
           </div>
-          <div class="plate" @click="toPage('/main-shuju/visual-basicinfo-peopleSearch')">
+          <div
+            class="plate"
+            @click="toPage('/main-shuju/visual-basicinfo-peopleSearch')"
+          >
             <img
               class="plate-bg"
               src="@/assets/img/yantai/index2/platform/right-2.png"
@@ -229,6 +232,17 @@
           <div class="anime"></div>
           <div class="anime"></div>
         </div>
+
+        <div class="m-arc">
+          <div class="line"></div>
+          <div class="line"></div>
+          <div class="line"></div>
+        </div>
+
+        <div class="m-arc2">
+          <div class="line"></div>
+          <div class="line"></div>
+        </div>
       </div>
     </div>
   </fixed1920>