动效

src/components/PermissionCard.vue

@@ -34,8 +34,8 @@
 }
 
 .shield-body {
-  width: 36px;
-  height: 42px;
+  width: 52px;
+  height: 60px;
   background: linear-gradient(180deg, #ffc53d, #faad14);
   clip-path: polygon(50% 0%, 100% 15%, 100% 65%, 50% 100%, 0% 65%, 0% 15%);
   display: flex;
@@ -52,28 +52,28 @@
 }
 
 .lock-shackle {
-  width: 12px;
-  height: 8px;
+  width: 16px;
+  height: 12px;
   border: 2px solid #1d1a0f;
   border-bottom: none;
-  border-radius: 6px 6px 0 0;
+  border-radius: 8px 8px 0 0;
 }
 
 .lock-body {
-  width: 14px;
-  height: 10px;
+  width: 18px;
+  height: 14px;
   background: #1d1a0f;
   border-radius: 2px;
 }
 
 @keyframes shield-glow {
   0%, 100% {
-    filter: drop-shadow(0 0 4px rgba(250, 173, 20, 0.3));
+    filter: drop-shadow(0 0 12px rgba(250, 173, 20, 0.4));
     transform: scale(1);
   }
   50% {
-    filter: drop-shadow(0 0 12px rgba(250, 173, 20, 0.6));
-    transform: scale(1.08);
+    filter: drop-shadow(0 0 30px rgba(250, 173, 20, 0.8));
+    transform: scale(1.4);
   }
 }
 </style>

src/components/UsingToolCard.vue

@@ -1,17 +1,17 @@
 <script lang="ts" setup>
-const ringCount = 4
+const barCount = 6
 </script>
 
 <template>
   <div class="tool-card">
-    <div class="ripple-container">
+    <div class="bar-row">
       <div
-          v-for="i in ringCount"
+          v-for="i in barCount"
           :key="i"
           :style="{
-          animationDelay: `${(i - 1) * 0.6}s`,
+          animationDelay: `${(i - 1) * 0.15}s`,
         }"
-          class="ring"
+          class="bar"
       />
     </div>
   </div>
@@ -32,37 +32,29 @@ const ringCount = 4
   justify-content: center;
 }
 
-.ripple-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
+.bar-row {
   display: flex;
   align-items: center;
-  justify-content: center;
+  gap: 8px;
 }
 
-.ring {
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  border: 2px solid #fa8c16;
-  animation: ripple 2.4s ease-out infinite;
-  box-shadow: 0 0 6px rgba(250, 140, 22, 0.3);
+.bar {
+  width: 8px;
+  height: 6px;
+  border-radius: 4px;
+  background: linear-gradient(180deg, #ffc069, #fa8c16);
+  box-shadow: 0 0 8px rgba(250, 140, 22, 0.4);
+  animation: expand-collapse 1.8s ease-in-out infinite alternate;
 }
 
-@keyframes ripple {
+@keyframes expand-collapse {
   0% {
-    width: 16px;
-    height: 16px;
-    opacity: 1;
-    border-width: 2px;
+    height: 6px;
+    opacity: 0.4;
   }
   100% {
-    width: 120px;
-    height: 120px;
-    opacity: 0;
-    border-width: 1px;
+    height: 48px;
+    opacity: 1;
   }
 }
 </style>