动效

src/components/RunningCard.vue

@@ -1,21 +1,44 @@
 <script lang="ts" setup>
-const particleCount = 8
+const particles = [
+  {tx: '1200%', ty: '-400%', delay: '0s', size: '12px'},
+  {tx: '-1000%', ty: '300%', delay: '0.12s', size: '18px'},
+  {tx: '800%', ty: '500%', delay: '0.24s', size: '10px'},
+  {tx: '-1300%', ty: '-250%', delay: '0.36s', size: '15px'},
+  {tx: '500%', ty: '-600%', delay: '0.48s', size: '20px'},
+  {tx: '-600%', ty: '550%', delay: '0.6s', size: '11px'},
+  {tx: '1400%', ty: '150%', delay: '0.72s', size: '17px'},
+  {tx: '-900%', ty: '-500%', delay: '0.84s', size: '13px'},
+  {tx: '700%', ty: '450%', delay: '0.96s', size: '19px'},
+  {tx: '-1200%', ty: '400%', delay: '1.08s', size: '10px'},
+  {tx: '1000%', ty: '-300%', delay: '1.2s', size: '16px'},
+  {tx: '-400%', ty: '-650%', delay: '1.32s', size: '14px'},
+  {tx: '1300%', ty: '350%', delay: '1.44s', size: '18px'},
+  {tx: '-1100%', ty: '200%', delay: '1.56s', size: '12px'},
+  {tx: '900%', ty: '-550%', delay: '1.68s', size: '20px'},
+  {tx: '-1400%', ty: '480%', delay: '1.8s', size: '11px'},
+  {tx: '600%', ty: '-420%', delay: '1.92s', size: '16px'},
+  {tx: '-800%', ty: '600%', delay: '2.04s', size: '14px'},
+  {tx: '1100%', ty: '-350%', delay: '2.16s', size: '19px'},
+  {tx: '-700%', ty: '-480%', delay: '2.28s', size: '13px'},
+]
 </script>
 
 <template>
   <div class="running-card">
     <div class="glow glow-1"/>
     <div class="glow glow-2"/>
-    <div class="stream">
-      <div
-          v-for="i in particleCount"
+    <div class="burst">
+      <span
+          v-for="(p, i) in particles"
           :key="i"
           :style="{
-          animationDelay: `${(i - 1) * 0.35}s`,
-          top: `${15 + (i % 3) * 30}%`,
+          '--tx': p.tx,
+          '--ty': p.ty,
+          animationDelay: p.delay,
+          fontSize: p.size,
         }"
-          class="particle"
-      />
+          class="star"
+      >✦</span>
     </div>
   </div>
 </template>
@@ -50,36 +73,32 @@ const particleCount = 8
   animation: drift-2 9s ease-in-out infinite alternate;
 }
 
-.stream {
+.burst {
   position: absolute;
   inset: 0;
   z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.particle {
+.star {
   position: absolute;
-  left: -8px;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: #13c2c2;
-  box-shadow: 0 0 10px rgba(19, 194, 194, 0.6);
-  animation: flow 2.8s linear infinite;
+  color: #13c2c2;
+  text-shadow: 0 0 8px rgba(19, 194, 194, 0.7);
+  animation: radiate 1.5s ease-out infinite alternate;
 }
 
-@keyframes flow {
+@keyframes radiate {
   0% {
-    left: -8px;
+    transform: translate(0, 0) scale(0.5);
     opacity: 0;
   }
-  10% {
-    opacity: 1;
-  }
-  90% {
+  20% {
     opacity: 1;
   }
   100% {
-    left: calc(100% + 8px);
+    transform: translate(var(--tx), var(--ty)) scale(1);
     opacity: 0;
   }
 }