107 lines
2.2 KiB
CSS
Executable File
107 lines
2.2 KiB
CSS
Executable File
.background-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.green-gradient {
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(168, 230, 207, 0.3) 0%,
|
|
rgba(220, 237, 193, 0.2) 25%,
|
|
rgba(200, 245, 200, 0.1) 50%,
|
|
rgba(180, 235, 180, 0.2) 75%,
|
|
rgba(168, 230, 207, 0.3) 100%
|
|
);
|
|
animation: green-flow 20s ease-in-out infinite;
|
|
}
|
|
|
|
.green-gradient::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: radial-gradient(
|
|
circle at 30% 70%,
|
|
rgba(129, 199, 132, 0.3) 0%,
|
|
transparent 50%
|
|
), radial-gradient(
|
|
circle at 70% 30%,
|
|
rgba(165, 214, 167, 0.25) 0%,
|
|
transparent 50%
|
|
);
|
|
animation: green-pulse 15s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes green-flow {
|
|
0%, 100% {
|
|
transform: rotate(0deg) scale(1);
|
|
opacity: 0.8;
|
|
}
|
|
25% {
|
|
transform: rotate(90deg) scale(1.1);
|
|
opacity: 0.6;
|
|
}
|
|
50% {
|
|
transform: rotate(180deg) scale(0.9);
|
|
opacity: 0.9;
|
|
}
|
|
75% {
|
|
transform: rotate(270deg) scale(1.05);
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
@keyframes green-pulse {
|
|
0% {
|
|
transform: scale(1) rotate(0deg);
|
|
opacity: 0.5;
|
|
}
|
|
50% {
|
|
transform: scale(1.2) rotate(180deg);
|
|
opacity: 0.8;
|
|
}
|
|
100% {
|
|
transform: scale(1) rotate(360deg);
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
/* 手机端背景优化 */
|
|
@media (max-width: 768px) {
|
|
.green-gradient {
|
|
animation-duration: 25s;
|
|
}
|
|
|
|
.green-gradient::before {
|
|
animation-duration: 18s;
|
|
}
|
|
}
|
|
|
|
/* 减少动画以节省电池 */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.green-gradient,
|
|
.green-gradient::before {
|
|
animation: none;
|
|
}
|
|
|
|
.green-gradient {
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(76, 175, 80, 0.2) 0%,
|
|
rgba(165, 214, 167, 0.1) 50%,
|
|
rgba(200, 230, 201, 0.15) 100%
|
|
);
|
|
}
|
|
} |