.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% ); } }