动效

src/components/ErrorCard.vue

@@ -5,8 +5,10 @@
   <div class="error-card">
     <div class="glow glow-1"/>
     <div class="glow glow-2"/>
-    <div class="pulse-ring"/>
-    <div class="cross">&#10005;</div>
+    <div class="ripple r1"/>
+    <div class="ripple r2"/>
+    <div class="ripple r3"/>
+    <div class="cross">⚠</div>
   </div>
 </template>
 
@@ -45,36 +47,49 @@
   animation: drift-2 7s ease-in-out infinite alternate;
 }
 
-.pulse-ring {
+.ripple {
   position: absolute;
-  width: 40px;
-  height: 40px;
   border-radius: 50%;
-  border: 2px solid #ff4d4f;
+  border: 8px solid rgba(255, 77, 79, 0.5);
   z-index: 1;
-  animation: error-pulse 2s ease-out infinite;
+  animation: ripple-expand 2.4s ease-out infinite;
+  box-shadow: 0 0 4px rgba(255, 77, 79, 0.2);
+}
+
+.r1 {
+  animation-delay: 0s;
+}
+
+.r2 {
+  animation-delay: 0.8s;
+}
+
+.r3 {
+  animation-delay: 1.6s;
 }
 
 .cross {
   position: relative;
   z-index: 1;
-  font-size: 28px;
+  font-size: 56px;
   color: #ff4d4f;
   font-weight: bold;
   animation: cross-flash 2s ease-in-out infinite;
   text-shadow: 0 0 10px rgba(255, 77, 79, 0.6);
 }
 
-@keyframes error-pulse {
+@keyframes ripple-expand {
   0% {
-    width: 20px;
-    height: 20px;
+    width: 10px;
+    height: 10px;
     opacity: 1;
+    border-width: 8px;
   }
   100% {
-    width: 80px;
-    height: 80px;
+    width: 300px;
+    height: 300px;
     opacity: 0;
+    border-width: 1px;
   }
 }