121 lines
2.4 KiB
CSS
121 lines
2.4 KiB
CSS
/* 全局渐变背景样式 */
|
|
.gradient-background {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* 备选渐变背景（更柔和的紫色渐变） */
|
|
.gradient-background-soft {
|
|
background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #4facfe 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* 淡紫色渐变背景（接近图片效果） */
|
|
.gradient-background-light {
|
|
background: linear-gradient(180deg, #e8d5ff 0%, #f5f1ff 50%, #ffffff 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* 圆圈晕染效果背景 */
|
|
.gradient-background-circles {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
background: linear-gradient(180deg, #e8d5ff 0%, #f5f1ff 35%, #ffffff 100%);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 左上角紫色大圆 */
|
|
.gradient-background-circles::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -40%;
|
|
left: -30%;
|
|
width: 80%;
|
|
height: 80%;
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(139, 92, 246, 0.35) 0%,
|
|
rgba(139, 92, 246, 0.2) 25%,
|
|
rgba(139, 92, 246, 0.1) 45%,
|
|
rgba(139, 92, 246, 0.05) 65%,
|
|
transparent 85%
|
|
);
|
|
border-radius: 50%;
|
|
filter: blur(60px);
|
|
z-index: 0;
|
|
animation: slowPulse 12s ease-in-out infinite;
|
|
}
|
|
|
|
/* 右上角蓝色大圆 */
|
|
.gradient-background-circles::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -10%;
|
|
right: -35%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(59, 130, 246, 0.3) 0%,
|
|
rgba(59, 130, 246, 0.15) 30%,
|
|
rgba(59, 130, 246, 0.08) 50%,
|
|
rgba(59, 130, 246, 0.03) 70%,
|
|
transparent 90%
|
|
);
|
|
border-radius: 50%;
|
|
filter: blur(80px);
|
|
z-index: 0;
|
|
animation: rotate 20s linear infinite;
|
|
}
|
|
|
|
|
|
/* 动画效果 */
|
|
@keyframes slowPulse {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: rotate(0deg) scale(1);
|
|
}
|
|
50% {
|
|
transform: rotate(180deg) scale(1.03);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translateY(0px) scale(1);
|
|
opacity: 0.8;
|
|
}
|
|
33% {
|
|
transform: translateY(-15px) scale(1.02);
|
|
opacity: 1;
|
|
}
|
|
66% {
|
|
transform: translateY(10px) scale(0.98);
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
/* 确保内容在圆圈效果之上 */
|
|
.gradient-background-circles > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.gradient-background-circles .content {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|