优化结果
This commit is contained in:
202
InfoGenie-frontend/public/60sapi/实用功能/实时天气[目前有问题]/background.css
Normal file
202
InfoGenie-frontend/public/60sapi/实用功能/实时天气[目前有问题]/background.css
Normal file
@@ -0,0 +1,202 @@
|
||||
/* 背景样式文件 - 独立管理背景相关CSS */
|
||||
|
||||
/* 主体背景 */
|
||||
body {
|
||||
background: linear-gradient(135deg, #a8e6cf 0%, #dcedc8 50%, #f0f4c3 100%);
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 背景装饰元素 */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 80%, rgba(120, 219, 226, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba(168, 230, 207, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, rgba(220, 237, 200, 0.1) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* 动态背景效果 */
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:
|
||||
linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%),
|
||||
linear-gradient(-45deg, transparent 30%, rgba(168, 230, 207, 0.05) 50%, transparent 70%);
|
||||
background-size: 200px 200px;
|
||||
animation: backgroundMove 20s linear infinite;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* 背景动画 */
|
||||
@keyframes backgroundMove {
|
||||
0% {
|
||||
background-position: 0 0, 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 200px 200px, -200px -200px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 容器背景 */
|
||||
.container {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(5px);
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 卡片背景增强 */
|
||||
.weather-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(15px);
|
||||
border: 1px solid rgba(168, 230, 207, 0.3);
|
||||
box-shadow:
|
||||
0 10px 30px rgba(0, 0, 0, 0.1),
|
||||
0 1px 8px rgba(168, 230, 207, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
/* 当前天气区域背景 */
|
||||
.current-weather {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(168, 230, 207, 0.8) 0%,
|
||||
rgba(220, 237, 200, 0.8) 50%,
|
||||
rgba(240, 244, 195, 0.8) 100%);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow:
|
||||
0 4px 15px rgba(39, 174, 96, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
/* 详情项背景 */
|
||||
.detail-item {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(168, 230, 207, 0.1) 0%,
|
||||
rgba(255, 255, 255, 0.1) 100%);
|
||||
backdrop-filter: blur(5px);
|
||||
border: 1px solid rgba(168, 230, 207, 0.2);
|
||||
box-shadow: 0 2px 8px rgba(39, 174, 96, 0.05);
|
||||
}
|
||||
|
||||
/* 生活指数项背景 */
|
||||
.index-item {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(168, 230, 207, 0.05) 0%,
|
||||
rgba(255, 255, 255, 0.1) 100%);
|
||||
backdrop-filter: blur(5px);
|
||||
border: 1px solid rgba(168, 230, 207, 0.15);
|
||||
box-shadow: 0 2px 10px rgba(39, 174, 96, 0.05);
|
||||
}
|
||||
|
||||
.index-item:hover {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(168, 230, 207, 0.1) 0%,
|
||||
rgba(255, 255, 255, 0.15) 100%);
|
||||
box-shadow: 0 5px 20px rgba(39, 174, 96, 0.1);
|
||||
}
|
||||
|
||||
/* 输入框背景 */
|
||||
#cityInput {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 2px solid rgba(168, 230, 207, 0.6);
|
||||
box-shadow: 0 2px 10px rgba(39, 174, 96, 0.1);
|
||||
}
|
||||
|
||||
#cityInput:focus {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
box-shadow:
|
||||
0 0 15px rgba(39, 174, 96, 0.2),
|
||||
0 2px 10px rgba(39, 174, 96, 0.1);
|
||||
}
|
||||
|
||||
/* 按钮背景 */
|
||||
#searchBtn {
|
||||
background: linear-gradient(135deg,
|
||||
#27ae60 0%,
|
||||
#2ecc71 50%,
|
||||
#58d68d 100%);
|
||||
box-shadow:
|
||||
0 4px 15px rgba(39, 174, 96, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
#searchBtn:hover {
|
||||
background: linear-gradient(135deg,
|
||||
#229954 0%,
|
||||
#27ae60 50%,
|
||||
#52c370 100%);
|
||||
box-shadow:
|
||||
0 6px 20px rgba(39, 174, 96, 0.4),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 错误消息背景 */
|
||||
.error-message {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(231, 76, 60, 0.1) 0%,
|
||||
rgba(255, 255, 255, 0.1) 100%);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(231, 76, 60, 0.2);
|
||||
box-shadow: 0 4px 15px rgba(231, 76, 60, 0.1);
|
||||
}
|
||||
|
||||
/* 加载状态背景 */
|
||||
.loading {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 15px;
|
||||
border: 1px solid rgba(168, 230, 207, 0.3);
|
||||
box-shadow: 0 4px 15px rgba(39, 174, 96, 0.1);
|
||||
}
|
||||
|
||||
/* 移动端背景优化 */
|
||||
@media (max-width: 767px) {
|
||||
body::after {
|
||||
background-size: 100px 100px;
|
||||
animation-duration: 15s;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
.weather-card {
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 高性能设备背景增强 */
|
||||
@media (min-width: 1024px) {
|
||||
body::before {
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 80%, rgba(120, 219, 226, 0.15) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba(168, 230, 207, 0.15) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, rgba(220, 237, 200, 0.15) 0%, transparent 50%),
|
||||
radial-gradient(circle at 60% 70%, rgba(240, 244, 195, 0.1) 0%, transparent 50%);
|
||||
}
|
||||
|
||||
.weather-card {
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.current-weather {
|
||||
backdrop-filter: blur(15px);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user