137 lines
2.5 KiB
CSS
137 lines
2.5 KiB
CSS
/* 背景样式文件 */
|
|
|
|
/* 页面主背景 */
|
|
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);
|
|
}
|
|
} |