继续更新

InfoGenie-frontend/public/60sapi/热搜榜单/猫眼网剧实时热度/css/background.css

@@ -0,0 +1,76 @@
+.background-canvas {
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    overflow: hidden;
+    background: linear-gradient(180deg, #f4fff6 0%, #e7f8eb 45%, #def1e4 100%);
+}
+
+.glow {
+    position: absolute;
+    width: 420px;
+    height: 420px;
+    border-radius: 55% 45% 60% 40% / 48% 52% 45% 55%;
+    opacity: 0.25;
+    filter: blur(0px);
+    background: radial-gradient(circle at 35% 35%, rgba(140, 214, 167, 0.65), rgba(140, 214, 167, 0));
+    animation: floaty 32s ease-in-out infinite;
+}
+
+.glow-1 {
+    top: -140px;
+    left: -160px;
+    animation-delay: 0s;
+}
+
+.glow-2 {
+    top: 55%;
+    left: 60%;
+    animation-delay: 8s;
+    background: radial-gradient(circle at 60% 60%, rgba(120, 192, 152, 0.55), rgba(120, 192, 152, 0));
+}
+
+.glow-3 {
+    bottom: -160px;
+    right: -120px;
+    animation-delay: 16s;
+    background: radial-gradient(circle at 40% 40%, rgba(176, 229, 197, 0.6), rgba(176, 229, 197, 0));
+}
+
+@keyframes floaty {
+    0% {
+        transform: translate3d(0, 0, 0) scale(1);
+    }
+    30% {
+        transform: translate3d(35px, -25px, 0) scale(1.05);
+    }
+    60% {
+        transform: translate3d(-30px, 30px, 0) scale(0.95);
+    }
+    100% {
+        transform: translate3d(0, 0, 0) scale(1);
+    }
+}
+
+@media (max-width: 768px) {
+    .glow {
+        width: 260px;
+        height: 260px;
+        opacity: 0.22;
+    }
+
+    .glow-1 {
+        top: -110px;
+        left: -140px;
+    }
+
+    .glow-2 {
+        top: 48%;
+        left: 38%;
+    }
+
+    .glow-3 {
+        bottom: -140px;
+        right: -120px;
+    }
+}