渐显动画

src/components/PageHome.vue

@@ -131,21 +131,24 @@
   line-height: 1.3;
   color: #1a1a1a;
   margin-bottom: clamp(16px, 2vh, 40px);
+  animation: fadeIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
 }
 
 .hero-buttons {
   display: flex;
   gap: clamp(10px, 3vw, 35px);
   justify-content: center;
+  animation: fadeIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
 }
 
 .btn-img {
   height: clamp(36px, 6.6vh, 120px);
   width: auto;
   display: block;
-  transition: transform 0.3s;
+  transition: transform 0.3s, filter 0.3s;
   &:hover {
-    transform: translateY(-2px);
+    transform: translateY(-3px) scale(1.04);
+    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15));
   }
 }
 
@@ -193,6 +196,17 @@
   height: clamp(330px, 58vh, 780px);
   width: auto;
   display: block;
+  animation: fadeIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes fadeSlideUp {
+  from { opacity: 0; transform: translateY(40px); }
+  to   { opacity: 1; transform: translateY(0); }
 }
 
 .phone-placeholder {