From fda79a716dd0831ac78956c74c92e6fd68d6dbed Mon Sep 17 00:00:00 2001
From: JavaZero <71128095+JavaZeroo@users.noreply.github.com>
Date: Mon, 28 Jul 2025 11:19:10 +0800
Subject: [PATCH] feat: add fancy hover animation

---
 src/components/FileUpload.jsx | 12 +++++++-----
 src/index.css                 | 24 ++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/components/FileUpload.jsx b/src/components/FileUpload.jsx
index e437d3d..1ffefd7 100644
--- a/src/components/FileUpload.jsx
+++ b/src/components/FileUpload.jsx
@@ -71,8 +71,10 @@ export function FileUpload({ onFilesUploaded }) {
         📁 文件上传
       </h3>
       <div
-        className={`drag-area border-2 border-dashed rounded-lg p-4 text-center cursor-pointer ${
-          isDragOver ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-gray-400'
+        className={`group drag-area border-2 border-dashed rounded-lg p-4 text-center cursor-pointer transition-transform duration-300 ${
+          isDragOver
+            ? 'border-blue-500 bg-blue-50 scale-105 shadow-lg'
+            : 'border-gray-300 hover:border-gray-400 hover:scale-105 hover:shadow-md'
         }`}
         onDragEnter={handleDragEnter}
         onDragOver={handleDragOver}
@@ -90,9 +92,9 @@ export function FileUpload({ onFilesUploaded }) {
           }
         }}
       >
-        <Upload 
-          className="mx-auto mb-2 text-gray-400" 
-          size={32} 
+        <Upload
+          className="mx-auto mb-2 text-gray-400 float-on-hover"
+          size={32}
           aria-hidden="true"
         />
         <p className="text-sm text-gray-600 mb-1">
diff --git a/src/index.css b/src/index.css
index 3d38cda..6a72453 100644
--- a/src/index.css
+++ b/src/index.css
@@ -267,3 +267,27 @@ input[type="checkbox"]:focus {
     animation: none !important;
   }
 }
+
+/* 浮动动画，用于图标或按钮的悬停效果 */
+@keyframes floatBounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-6px);
+  }
+}
+
+.float-on-hover {
+  transition: transform 0.3s;
+}
+
+.group:hover .float-on-hover {
+  animation: floatBounce 1.2s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .group:hover .float-on-hover {
+    animation: none !important;
+  }
+}