style: 增加可爱的交互动画

src/layouts/default.vue

@@ -62,7 +62,7 @@ onUnmounted(() => {
           :class="{ 'aside-item-active': router.currentRoute.value.path === item.path }"
           @click="router.push(item.path)"
         >
-          <img :src="router.currentRoute.value.path === item.path ? item.meta!.activeIcon : item.meta!.icon" alt="">
+          <img class="swing-icon" :src="router.currentRoute.value.path === item.path ? item.meta!.activeIcon : item.meta!.icon" alt="">
           <span class="text">{{ item.meta!.title }}</span>
         </div>
       </el-aside>
@@ -272,4 +272,27 @@ onUnmounted(() => {
     }
   }
 }
+.aside-item:hover {
+  .swing-icon {
+    animation: swing 1s ease-in-out;
+  }
+}
+
+@keyframes swing {
+  0% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(-30deg);
+  }
+  50% {
+    transform: rotate(30deg);
+  }
+  75% {
+    transform: rotate(-15deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
 </style>