From fc5d6e3446e15e05ba105d3bf81ba0eabe1add93 Mon Sep 17 00:00:00 2001
From: Cat Tom <linweijie2015@gmail.com>
Date: Wed, 26 Mar 2025 12:54:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9C=A8=20App.vue=20=E4=B8=AD?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=B0=E7=9A=84=E8=8A=B1=E6=9C=B5=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=E6=95=88=E6=9E=9C=EF=BC=8C=E4=BC=98=E5=8C=96=E8=8A=B1?=
 =?UTF-8?q?=E7=93=A3=E5=92=8C=E4=B8=AD=E5=BF=83=E7=9A=84=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=EF=BC=8C=E6=8F=90=E5=8D=87=E8=A7=86=E8=A7=89=E8=A1=A8=E7=8E=B0?=
 =?UTF-8?q?=E5=92=8C=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 91 +++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 74 insertions(+), 17 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 87cb395..318a5cb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -194,6 +194,9 @@ onUnmounted(() => {
   animation: floatFlower 25s ease-in-out infinite;
   animation-delay: var(--delay);
   opacity: 0.5;
+  transform-origin: center;
+  backface-visibility: hidden;
+  perspective: 1000px;
 }
 
 .flower-center {
@@ -205,6 +208,7 @@ onUnmounted(() => {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  animation: pulse 2s ease-in-out infinite;
 }
 
 .flower-petal {
@@ -216,13 +220,65 @@ onUnmounted(() => {
   top: 50%;
   left: 50%;
   transform-origin: 0 0;
+  animation: petalWave 3s ease-in-out infinite;
 }
 
-.flower-petal:nth-child(1) { transform: rotate(0deg) translate(10px, 0); }
-.flower-petal:nth-child(2) { transform: rotate(72deg) translate(10px, 0); }
-.flower-petal:nth-child(3) { transform: rotate(144deg) translate(10px, 0); }
-.flower-petal:nth-child(4) { transform: rotate(216deg) translate(10px, 0); }
-.flower-petal:nth-child(5) { transform: rotate(288deg) translate(10px, 0); }
+.flower-petal:nth-child(1) { 
+  transform: rotate(0deg) translate(10px, 0);
+  animation-delay: 0s;
+}
+.flower-petal:nth-child(2) { 
+  transform: rotate(72deg) translate(10px, 0);
+  animation-delay: 0.2s;
+}
+.flower-petal:nth-child(3) { 
+  transform: rotate(144deg) translate(10px, 0);
+  animation-delay: 0.4s;
+}
+.flower-petal:nth-child(4) { 
+  transform: rotate(216deg) translate(10px, 0);
+  animation-delay: 0.6s;
+}
+.flower-petal:nth-child(5) { 
+  transform: rotate(288deg) translate(10px, 0);
+  animation-delay: 0.8s;
+}
+
+@keyframes floatFlower {
+  0% {
+    transform: translate(0, -50px) rotate(0deg) scale(1);
+  }
+  25% {
+    transform: translate(calc(100vw * 0.25), calc(100vh * 0.25)) rotate(180deg) scale(1.1);
+  }
+  50% {
+    transform: translate(calc(100vw * 0.5), calc(100vh * 0.5)) rotate(360deg) scale(1);
+  }
+  75% {
+    transform: translate(calc(100vw * 0.75), calc(100vh * 0.75)) rotate(540deg) scale(0.9);
+  }
+  100% {
+    transform: translate(100vw, -50px) rotate(720deg) scale(1);
+  }
+}
+
+@keyframes petalWave {
+  0%, 100% {
+    transform: rotate(var(--rotation)) translate(10px, 0) scale(1);
+  }
+  50% {
+    transform: rotate(var(--rotation)) translate(10px, 0) scale(1.1);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: translate(-50%, -50%) scale(1);
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.2);
+  }
+}
 
 /* 云朵样式 */
 .floating-cloud {
@@ -281,18 +337,6 @@ onUnmounted(() => {
 }
 
 /* 动画关键帧 */
-@keyframes floatFlower {
-  0% {
-    transform: translate(0, -50px) rotate(0deg);
-  }
-  50% {
-    transform: translate(calc(100vw * 0.5), calc(100vh + 50px)) rotate(360deg);
-  }
-  100% {
-    transform: translate(100vw, -50px) rotate(720deg);
-  }
-}
-
 @keyframes floatCloud {
   0% {
     transform: translateX(-150px) translateY(0);
@@ -431,6 +475,19 @@ onUnmounted(() => {
   .rainbow-glow {
     animation-duration: 20s;
   }
+  
+  .floating-flower {
+    animation-duration: 20s;
+    animation-timing-function: linear;
+  }
+  
+  .flower-petal {
+    animation-duration: 2s;
+  }
+  
+  .flower-center {
+    animation-duration: 1.5s;
+  }
 }
 
 .floating-element,