热门推荐

热门推荐

frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/css/background.css

@@ -6,9 +6,100 @@
     height: 100%;
     z-index: -1;
     overflow: hidden;
+    background-color: #f0f7ff;
 }
 
-.green-gradient {
+/* 太阳元素 */
+.sun {
+    position: absolute;
+    top: 50px;
+    right: 35%;
+    width: 60px;
+    height: 60px;
+    background: radial-gradient(circle, #ffeb3b 30%, #ff9800 70%);
+    border-radius: 50%;
+    box-shadow: 0 0 40px rgba(255, 152, 0, 0.6);
+    z-index: 0;
+    animation: sun-pulse 8s ease-in-out infinite;
+}
+
+/* 蓝色云元素 */
+.cloud {
+    position: absolute;
+    background: rgba(135, 206, 250, 0.8);
+    border-radius: 50px;
+    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
+    z-index: -1;
+}
+
+.cloud-1 {
+    top: 120px;
+    left: -150px;
+    width: 120px;
+    height: 40px;
+    animation: cloud-float 15s linear infinite;
+}
+
+.cloud-2 {
+    top: 180px;
+    right: -150px;
+    width: 160px;
+    height: 50px;
+    animation: cloud-float 20s linear infinite reverse;
+}
+
+.cloud-3 {
+    top: 60px;
+    left: -100px;
+    width: 100px;
+    height: 35px;
+    animation: cloud-float 12s linear infinite;
+}
+
+/* 云朵的伪元素，创建更自然的形状 */
+.cloud::before,
+.cloud::after {
+    content: '';
+    position: absolute;
+    background: rgba(135, 206, 250, 0.8);
+    border-radius: 50%;
+}
+
+.cloud::before {
+    width: 50px;
+    height: 50px;
+    top: -20px;
+    left: 15px;
+}
+
+.cloud::after {
+    width: 60px;
+    height: 60px;
+    top: -30px;
+    right: 15px;
+}
+
+@keyframes sun-pulse {
+    0%, 100% {
+        transform: scale(1);
+        box-shadow: 0 0 40px rgba(255, 152, 0, 0.6);
+    }
+    50% {
+        transform: scale(1.1);
+        box-shadow: 0 0 60px rgba(255, 152, 0, 0.8);
+    }
+}
+
+@keyframes cloud-float {
+    0% {
+        transform: translateX(-150px);
+    }
+    100% {
+        transform: translateX(calc(100vw + 150px));
+    }
+}
+
+.modern-gradient {
     position: absolute;
     top: -50%;
     left: -50%;
@@ -16,16 +107,19 @@
     height: 200%;
     background: linear-gradient(
         135deg,
-        rgba(76, 175, 80, 0.3) 0%,
-        rgba(129, 199, 132, 0.2) 25%,
-        rgba(165, 214, 167, 0.1) 50%,
-        rgba(200, 230, 201, 0.2) 75%,
-        rgba(76, 175, 80, 0.3) 100%
+        rgba(24, 144, 255, 0.6) 0%,
+        rgba(64, 169, 255, 0.5) 20%,
+        rgba(135, 208, 255, 0.4) 40%,
+        rgba(255, 175, 64, 0.4) 60%,
+        rgba(255, 122, 69, 0.5) 80%,
+        rgba(245, 85, 65, 0.6) 100%
     );
-    animation: green-flow 20s ease-in-out infinite;
+    animation: gradient-flow 25s ease-in-out infinite;
+    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
+    filter: blur(30px);
 }
 
-.green-gradient::before {
+.modern-gradient::before {
     content: '';
     position: absolute;
     top: 0;
@@ -33,18 +127,20 @@
     width: 100%;
     height: 100%;
     background: radial-gradient(
-        circle at 30% 70%,
-        rgba(139, 195, 74, 0.4) 0%,
-        transparent 50%
+        circle at 25% 65%,
+        rgba(24, 144, 255, 0.6) 0%,
+        transparent 60%
     ), radial-gradient(
-        circle at 70% 30%,
-        rgba(102, 187, 106, 0.3) 0%,
-        transparent 50%
+        circle at 75% 35%,
+        rgba(245, 85, 65, 0.5) 0%,
+        transparent 60%
     );
-    animation: green-pulse 15s ease-in-out infinite alternate;
+    animation: pulse-effect 18s ease-in-out infinite alternate;
+    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
+    filter: blur(20px);
 }
 
-@keyframes green-flow {
+@keyframes gradient-flow {
     0%, 100% {
         transform: rotate(0deg) scale(1);
         opacity: 0.8;
@@ -63,7 +159,7 @@
     }
 }
 
-@keyframes green-pulse {
+@keyframes pulse-effect {
     0% {
         transform: scale(1) rotate(0deg);
         opacity: 0.5;
@@ -80,28 +176,28 @@
 
 /* 手机端背景优化 */
 @media (max-width: 768px) {
-    .green-gradient {
+    .modern-gradient {
         animation-duration: 25s;
     }
     
-    .green-gradient::before {
+    .modern-gradient::before {
         animation-duration: 18s;
     }
 }
 
 /* 减少动画以节省电池 */
 @media (prefers-reduced-motion: reduce) {
-    .green-gradient,
-    .green-gradient::before {
+    .modern-gradient,
+    .modern-gradient::before {
         animation: none;
     }
     
-    .green-gradient {
+    .modern-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%
+            rgba(64, 169, 255, 0.3) 0%,
+            rgba(255, 175, 64, 0.2) 50%,
+            rgba(255, 122, 69, 0.25) 100%
         );
     }
 }