优化结果

InfoGenie-frontend/public/60sapi/实用功能/在线翻译/background.css

@@ -0,0 +1,137 @@
+/* 背景样式文件 */
+
+/* 页面主背景 */
+body {
+    background: linear-gradient(135deg, #e8f5e8 0%, #f0fdf4 25%, #dcfce7 50%, #f0fdf4 75%, #e8f5e8 100%);
+    background-size: 400% 400%;
+    animation: gradientShift 15s ease infinite;
+    background-attachment: fixed;
+}
+
+/* 背景动画 */
+@keyframes gradientShift {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+/* 容器背景 */
+.container {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* 翻译框背景 */
+.translate-box {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(116, 198, 157, 0.3);
+}
+
+/* 输入框背景 */
+#input-text {
+    background: rgba(255, 255, 255, 0.9);
+}
+
+#input-text:focus {
+    background: rgba(255, 255, 255, 1);
+}
+
+/* 输出框背景 */
+.output-text {
+    background: #f8fffe;
+}
+
+/* 按钮背景 */
+.translate-btn {
+    background: linear-gradient(135deg, #74c69d, #52b788);
+}
+
+.translate-btn:hover {
+    background: linear-gradient(135deg, #52b788, #40916c);
+}
+
+.translate-btn:disabled {
+    background: #b7e4c7;
+}
+
+.swap-btn {
+    background: #74c69d;
+}
+
+.swap-btn:hover {
+    background: #52b788;
+}
+
+/* 语言选择器背景 */
+.lang-select {
+    background: white;
+}
+
+.lang-select:focus {
+    background: rgba(255, 255, 255, 1);
+}
+
+/* 发音信息背景 */
+.pronounce-item {
+    background: rgba(116, 198, 157, 0.1);
+}
+
+/* 清除和复制按钮背景 */
+.clear-btn:hover,
+.copy-btn:hover {
+    background: rgba(116, 198, 157, 0.1);
+}
+
+/* 提示消息背景 */
+.toast {
+    background: #52b788;
+}
+
+.toast.error {
+    background: #e74c3c;
+}
+
+/* 响应式背景调整 */
+@media (max-width: 767px) {
+    body {
+        background-size: 200% 200%;
+        animation-duration: 10s;
+    }
+    
+    .container {
+        background: rgba(255, 255, 255, 0.05);
+        backdrop-filter: blur(5px);
+    }
+    
+    .translate-box {
+        background: rgba(255, 255, 255, 0.98);
+        backdrop-filter: blur(15px);
+    }
+}
+
+@media (max-width: 480px) {
+    body {
+        background-size: 150% 150%;
+        animation-duration: 8s;
+    }
+    
+    .container {
+        background: transparent;
+        backdrop-filter: none;
+        border: none;
+    }
+    
+    .translate-box {
+        background: rgba(255, 255, 255, 0.99);
+        backdrop-filter: blur(10px);
+    }
+}