update

src/views/home/workspace.vue

@@ -2,7 +2,7 @@
   <div class="homePage">
     <div class="header flex-center">首页</div>
     <div class="funMenu">
-      <div class="line" v-for="(line, index) in menuList" :key="index">
+      <!-- <div class="line" v-for="(line, index) in menuList" :key="index">
         <div
           class="item"
           v-for="item in line"
@@ -18,6 +18,34 @@
           <div class="optWrap">点击进入</div>
         </div>
       </div>
+ -->
+      <!-- 旋转动画 -->
+      <div class="animate">
+        <div class="ball ball1">
+          <img src="@/assets/images/home/jc.png" />
+          <p>1</p>
+        </div>
+        <div class="ball ball2">
+          <img src="@/assets/images/home/fw.png" />
+          <p>2</p>
+        </div>
+        <div class="ball ball3">
+          <img src="@/assets/images/home/da.png" />
+          <p>3</p>
+        </div>
+        <div class="ball ball4">
+          <img src="@/assets/images/home/fx.png" />
+          <p>4</p>
+        </div>
+        <div class="ball ball5">
+          <img src="@/assets/images/home/xt.png" />
+          <p>5</p>
+        </div>
+        <div class="ball ball6">
+          <img src="@/assets/images/home/zt.png" />
+          <p>6</p>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -102,7 +130,7 @@ export default {
     color: #ffffff;
   }
   .funMenu {
-    height: calc(100% - 60px);
+    /* height: calc(100% - 60px);
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -139,6 +167,94 @@ export default {
           cursor: pointer;
         }
       }
+    } */
+    /* 旋转动画 */
+    .animate {
+      width: 420px;
+      height: 300px;
+      border-radius: 50%;
+      position: absolute;
+      left: 10px;
+      top: 20px;
+
+      .ball {
+        width: 100px;
+        height: 100px;
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+      }
+      .ball img:hover {
+        transform: scale(1.2);
+      }
+      .ball img {
+        width: 70px;
+        height: 70px;
+        margin-bottom: 10px;
+      }
+      /* 6个图x和y轴动画加起来是18s , 18s/6 等于 3s
+每个球y轴动画延迟 从0递减3s,x轴与y轴相差动画时长的一半（9s/2） */
+      .ball1 {
+        animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -4.5s infinite alternate,
+          animY 9s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
+          scale 18s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
+      }
+      .ball2 {
+        animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -7.5s infinite alternate,
+          animY 9s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate,
+          scale 18s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate;
+      }
+      .ball3 {
+        animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -10.5s infinite alternate,
+          animY 9s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
+          scale 18s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate;
+      }
+      .ball4 {
+        animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -13.5s infinite alternate,
+          animY 9s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate,
+          scale 18s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate;
+      }
+      .ball5 {
+        animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -16.5s infinite alternate,
+          animY 9s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate,
+          scale 18s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate;
+      }
+      .ball6 {
+        animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -19.5s infinite alternate,
+          animY 9s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate,
+          scale 18s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate;
+      }
+    }
+  }
+
+  @keyframes animX {
+    0% {
+      left: -20px;
+    }
+    100% {
+      left: 340px;
+    }
+  }
+  @keyframes animY {
+    0% {
+      top: -30px;
+    }
+    100% {
+      top: 200px;
+    }
+  }
+  @keyframes scale {
+    0% {
+      transform: scale(0.7);
+    }
+    50% {
+      transform: scale(1.2);
+    }
+    100% {
+      transform: scale(0.7);
     }
   }
 }