继续更新

InfoGenie-frontend/public/60sapi/热搜榜单/Hacker News 榜单/css/background.css

@@ -2,42 +2,32 @@
 body {
     background: linear-gradient(
         135deg, 
-        #ff6b6b 0%, 
-        #4ecdc4 12.5%, 
-        #45b7d1 25%, 
-        #96ceb4 37.5%, 
-        #feca57 50%, 
-        #ff9ff3 62.5%, 
-        #54a0ff 75%, 
-        #5f27cd 87.5%, 
-        #00d2d3 100%
+        #e8f5e8 0%, 
+        #f1f8e9 25%, 
+        #dcedc8 50%, 
+        #c8e6c8 75%, 
+        #e8f5e8 100%
     );
-    background-size: 400% 400%;
-    animation: rainbowGradient 15s ease infinite;
+    background-size: 200% 200%;
+    animation: gentleGradient 20s ease infinite;
     background-attachment: fixed;
     min-height: 100vh;
     position: relative;
 }
 
-@keyframes rainbowGradient {
+@keyframes gentleGradient {
     0% {
         background-position: 0% 50%;
     }
-    25% {
-        background-position: 100% 50%;
-    }
     50% {
-        background-position: 100% 100%;
-    }
-    75% {
-        background-position: 0% 100%;
+        background-position: 100% 50%;
     }
     100% {
         background-position: 0% 50%;
     }
 }
 
-/* 彩虹装饰层 */
+/* 淡雅绿色装饰层 */
 body::before {
     content: '';
     position: fixed;
@@ -46,17 +36,15 @@ body::before {
     width: 100%;
     height: 100%;
     background: 
-        radial-gradient(circle at 20% 20%, rgba(255, 107, 107, 0.15) 0%, transparent 50%),
-        radial-gradient(circle at 80% 80%, rgba(78, 205, 196, 0.15) 0%, transparent 50%),
-        radial-gradient(circle at 40% 80%, rgba(69, 183, 209, 0.12) 0%, transparent 40%),
-        radial-gradient(circle at 60% 20%, rgba(150, 206, 180, 0.12) 0%, transparent 40%),
-        radial-gradient(circle at 80% 40%, rgba(254, 202, 87, 0.1) 0%, transparent 35%);
+        radial-gradient(circle at 20% 20%, rgba(129, 199, 132, 0.08) 0%, transparent 50%),
+        radial-gradient(circle at 80% 80%, rgba(165, 214, 167, 0.06) 0%, transparent 50%),
+        radial-gradient(circle at 40% 80%, rgba(200, 230, 201, 0.05) 0%, transparent 40%),
+        radial-gradient(circle at 60% 20%, rgba(220, 237, 200, 0.04) 0%, transparent 40%);
     pointer-events: none;
     z-index: -1;
-    animation: float 20s ease-in-out infinite alternate;
 }
 
-/* 彩虹粒子效果 */
+/* 淡雅绿色点缀 */
 body::after {
     content: '';
     position: fixed;
@@ -65,42 +53,13 @@ body::after {
     width: 100%;
     height: 100%;
     background-image: 
-        radial-gradient(circle at 10% 10%, rgba(255, 107, 107, 0.8) 2px, transparent 2px),
-        radial-gradient(circle at 30% 20%, rgba(78, 205, 196, 0.8) 1.5px, transparent 1.5px),
-        radial-gradient(circle at 50% 30%, rgba(69, 183, 209, 0.8) 1px, transparent 1px),
-        radial-gradient(circle at 70% 40%, rgba(150, 206, 180, 0.8) 2px, transparent 2px),
-        radial-gradient(circle at 90% 50%, rgba(254, 202, 87, 0.8) 1.5px, transparent 1.5px),
-        radial-gradient(circle at 20% 60%, rgba(255, 159, 243, 0.8) 1px, transparent 1px),
-        radial-gradient(circle at 40% 70%, rgba(84, 160, 255, 0.8) 2px, transparent 2px),
-        radial-gradient(circle at 60% 80%, rgba(95, 39, 205, 0.8) 1.5px, transparent 1.5px),
-        radial-gradient(circle at 80% 90%, rgba(0, 210, 211, 0.8) 1px, transparent 1px);
-    background-size: 200px 200px, 250px 250px, 180px 180px, 300px 300px, 220px 220px, 160px 160px, 280px 280px, 240px 240px, 200px 200px;
-    animation: sparkle 25s linear infinite;
+        radial-gradient(circle at 15% 15%, rgba(129, 199, 132, 0.3) 1px, transparent 1px),
+        radial-gradient(circle at 45% 25%, rgba(165, 214, 167, 0.25) 1px, transparent 1px),
+        radial-gradient(circle at 75% 35%, rgba(200, 230, 201, 0.2) 1px, transparent 1px),
+        radial-gradient(circle at 25% 65%, rgba(220, 237, 200, 0.15) 1px, transparent 1px),
+        radial-gradient(circle at 85% 75%, rgba(129, 199, 132, 0.2) 1px, transparent 1px);
+    background-size: 300px 300px, 400px 400px, 350px 350px, 450px 450px, 380px 380px;
     pointer-events: none;
     z-index: -1;
-    opacity: 0.6;
-}
-
-@keyframes float {
-    0% {
-        transform: translateY(0px) rotate(0deg);
-    }
-    100% {
-        transform: translateY(-15px) rotate(2deg);
-    }
-}
-
-@keyframes sparkle {
-    0%, 100% {
-        transform: translateX(0) translateY(0) scale(1);
-    }
-    25% {
-        transform: translateX(-10px) translateY(-5px) scale(1.1);
-    }
-    50% {
-        transform: translateX(10px) translateY(-10px) scale(0.9);
-    }
-    75% {
-        transform: translateX(-5px) translateY(-15px) scale(1.05);
-    }
+    opacity: 0.4;
 }