update: 2026-03-28 20:59

InfoGenie-frontend/public/toolbox/学习工具/计算机英语词汇学习/background.css

@@ -0,0 +1,139 @@
+/* 背景样式文件 */
+
+/* 主体背景 */
+body {
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    background-attachment: fixed;
+}
+
+/* 淡绿色渐变背景变体 */
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, #e8f5e8 0%, #a8e6a3 50%, #81c784 100%);
+    opacity: 0.3;
+    z-index: -2;
+}
+
+/* 动态背景装饰 */
+body::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: 
+        radial-gradient(circle at 20% 80%, rgba(39, 174, 96, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 80% 20%, rgba(46, 204, 113, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 40% 40%, rgba(52, 152, 219, 0.05) 0%, transparent 50%);
+    z-index: -1;
+    animation: backgroundFloat 20s ease-in-out infinite;
+}
+
+/* 背景动画 */
+@keyframes backgroundFloat {
+    0%, 100% {
+        transform: translateY(0px) rotate(0deg);
+    }
+    33% {
+        transform: translateY(-10px) rotate(1deg);
+    }
+    66% {
+        transform: translateY(5px) rotate(-1deg);
+    }
+}
+
+/* 词汇卡片背景增强 */
+.vocabulary-card {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+/* 按钮背景效果 */
+.control-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.5s;
+    z-index: -1;
+}
+
+.control-btn {
+    position: relative;
+    overflow: hidden;
+}
+
+.control-btn:hover::before {
+    left: 100%;
+}
+
+/* 模式按钮背景效果 */
+.mode-btn {
+    position: relative;
+    overflow: hidden;
+}
+
+.mode-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+    transition: left 0.4s;
+    z-index: -1;
+}
+
+.mode-btn:hover::before {
+    left: 100%;
+}
+
+/* 响应式背景调整 */
+@media (max-width: 768px) {
+    body::after {
+        animation-duration: 15s;
+    }
+    
+    .vocabulary-card {
+        background: rgba(255, 255, 255, 0.98);
+    }
+}
+
+@media (max-width: 480px) {
+    body::before {
+        opacity: 0.2;
+    }
+    
+    body::after {
+        animation: none;
+    }
+}
+
+/* 深色模式背景支持 */
+@media (prefers-color-scheme: dark) {
+    body {
+        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
+    }
+    
+    body::before {
+        background: linear-gradient(135deg, #27ae60 0%, #2ecc71 50%, #16a085 100%);
+        opacity: 0.1;
+    }
+    
+    .vocabulary-card {
+        background: rgba(44, 62, 80, 0.95);
+        color: #ecf0f1;
+        border-color: rgba(39, 174, 96, 0.3);
+    }
+}