203 lines
4.0 KiB
CSS
203 lines
4.0 KiB
CSS
.background-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
overflow: hidden;
|
|
background-color: #f0f7ff;
|
|
}
|
|
|
|
/* 太阳元素 */
|
|
.sun {
|
|
position: absolute;
|
|
top: 50px;
|
|
right: 35%;
|
|
width: 60px;
|
|
height: 60px;
|
|
background: radial-gradient(circle, #ffeb3b 30%, #ff9800 70%);
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 40px rgba(255, 152, 0, 0.6);
|
|
z-index: 0;
|
|
animation: sun-pulse 8s ease-in-out infinite;
|
|
}
|
|
|
|
/* 蓝色云元素 */
|
|
.cloud {
|
|
position: absolute;
|
|
background: rgba(135, 206, 250, 0.8);
|
|
border-radius: 50px;
|
|
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
|
|
z-index: -1;
|
|
}
|
|
|
|
.cloud-1 {
|
|
top: 120px;
|
|
left: -150px;
|
|
width: 120px;
|
|
height: 40px;
|
|
animation: cloud-float 15s linear infinite;
|
|
}
|
|
|
|
.cloud-2 {
|
|
top: 180px;
|
|
right: -150px;
|
|
width: 160px;
|
|
height: 50px;
|
|
animation: cloud-float 20s linear infinite reverse;
|
|
}
|
|
|
|
.cloud-3 {
|
|
top: 60px;
|
|
left: -100px;
|
|
width: 100px;
|
|
height: 35px;
|
|
animation: cloud-float 12s linear infinite;
|
|
}
|
|
|
|
/* 云朵的伪元素，创建更自然的形状 */
|
|
.cloud::before,
|
|
.cloud::after {
|
|
content: '';
|
|
position: absolute;
|
|
background: rgba(135, 206, 250, 0.8);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.cloud::before {
|
|
width: 50px;
|
|
height: 50px;
|
|
top: -20px;
|
|
left: 15px;
|
|
}
|
|
|
|
.cloud::after {
|
|
width: 60px;
|
|
height: 60px;
|
|
top: -30px;
|
|
right: 15px;
|
|
}
|
|
|
|
@keyframes sun-pulse {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
box-shadow: 0 0 40px rgba(255, 152, 0, 0.6);
|
|
}
|
|
50% {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 0 60px rgba(255, 152, 0, 0.8);
|
|
}
|
|
}
|
|
|
|
@keyframes cloud-float {
|
|
0% {
|
|
transform: translateX(-150px);
|
|
}
|
|
100% {
|
|
transform: translateX(calc(100vw + 150px));
|
|
}
|
|
}
|
|
|
|
.modern-gradient {
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(24, 144, 255, 0.6) 0%,
|
|
rgba(64, 169, 255, 0.5) 20%,
|
|
rgba(135, 208, 255, 0.4) 40%,
|
|
rgba(255, 175, 64, 0.4) 60%,
|
|
rgba(255, 122, 69, 0.5) 80%,
|
|
rgba(245, 85, 65, 0.6) 100%
|
|
);
|
|
animation: gradient-flow 25s ease-in-out infinite;
|
|
border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
|
|
filter: blur(30px);
|
|
}
|
|
|
|
.modern-gradient::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: radial-gradient(
|
|
circle at 25% 65%,
|
|
rgba(24, 144, 255, 0.6) 0%,
|
|
transparent 60%
|
|
), radial-gradient(
|
|
circle at 75% 35%,
|
|
rgba(245, 85, 65, 0.5) 0%,
|
|
transparent 60%
|
|
);
|
|
animation: pulse-effect 18s ease-in-out infinite alternate;
|
|
border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
|
|
filter: blur(20px);
|
|
}
|
|
|
|
@keyframes gradient-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 pulse-effect {
|
|
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) {
|
|
.modern-gradient {
|
|
animation-duration: 25s;
|
|
}
|
|
|
|
.modern-gradient::before {
|
|
animation-duration: 18s;
|
|
}
|
|
}
|
|
|
|
/* 减少动画以节省电池 */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.modern-gradient,
|
|
.modern-gradient::before {
|
|
animation: none;
|
|
}
|
|
|
|
.modern-gradient {
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(64, 169, 255, 0.3) 0%,
|
|
rgba(255, 175, 64, 0.2) 50%,
|
|
rgba(255, 122, 69, 0.25) 100%
|
|
);
|
|
}
|
|
} |