优化结果

InfoGenie-frontend/public/60sapi/热搜榜单/头条热搜榜/css/background.css

@@ -0,0 +1,107 @@
+.background-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    overflow: hidden;
+}
+
+.green-gradient {
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(
+        135deg,
+        rgba(240, 20, 20, 0.3) 0%,
+        rgba(255, 60, 60, 0.2) 25%,
+        rgba(255, 100, 100, 0.1) 50%,
+        rgba(255, 150, 150, 0.2) 75%,
+        rgba(240, 20, 20, 0.3) 100%
+    );
+    animation: green-flow 20s ease-in-out infinite;
+}
+
+.green-gradient::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(
+        circle at 30% 70%,
+        rgba(255, 45, 45, 0.4) 0%,
+        transparent 50%
+    ), radial-gradient(
+        circle at 70% 30%,
+        rgba(255, 100, 100, 0.3) 0%,
+        transparent 50%
+    );
+    animation: green-pulse 15s ease-in-out infinite alternate;
+}
+
+@keyframes green-flow {
+    0%, 100% {
+        transform: rotate(0deg) scale(1);
+        opacity: 0.8;
+    }
+    25% {
+        transform: rotate(90deg) scale(1.1);
+        opacity: 0.6;
+    }
+    50% {
+        transform: rotate(180deg) scale(0.9);
+        opacity: 0.9;
+    }
+    75% {
+        transform: rotate(270deg) scale(1.05);
+        opacity: 0.7;
+    }
+}
+
+@keyframes green-pulse {
+    0% {
+        transform: scale(1) rotate(0deg);
+        opacity: 0.5;
+    }
+    50% {
+        transform: scale(1.2) rotate(180deg);
+        opacity: 0.8;
+    }
+    100% {
+        transform: scale(1) rotate(360deg);
+        opacity: 0.6;
+    }
+}
+
+/* 手机端背景优化 */
+@media (max-width: 768px) {
+    .green-gradient {
+        animation-duration: 25s;
+    }
+    
+    .green-gradient::before {
+        animation-duration: 18s;
+    }
+}
+
+/* 减少动画以节省电池 */
+@media (prefers-reduced-motion: reduce) {
+    .green-gradient,
+    .green-gradient::before {
+        animation: none;
+    }
+    
+    .green-gradient {
+        background: linear-gradient(
+            135deg,
+            rgba(76, 175, 80, 0.2) 0%,
+            rgba(165, 214, 167, 0.1) 50%,
+            rgba(200, 230, 201, 0.15) 100%
+        );
+    }
+}