80 lines
1.6 KiB
CSS
80 lines
1.6 KiB
CSS
.background-layer {
|
|
position: fixed;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
z-index: -1;
|
|
background: linear-gradient(180deg, #e8f5e8 0%, #f0f8e8 55%, #e8f5e8 100%);
|
|
}
|
|
|
|
.aurora {
|
|
position: absolute;
|
|
width: 480px;
|
|
height: 480px;
|
|
border-radius: 58% 42% 53% 47% / 52% 46% 54% 48%;
|
|
filter: blur(0px);
|
|
opacity: 0.28;
|
|
background: radial-gradient(circle at 40% 40%, rgba(168, 230, 207, 0.4), rgba(168, 230, 207, 0));
|
|
animation: float 32s ease-in-out infinite;
|
|
}
|
|
|
|
.aurora-1 {
|
|
top: -160px;
|
|
left: -140px;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.aurora-2 {
|
|
top: 50%;
|
|
left: 60%;
|
|
animation-delay: 6s;
|
|
background: radial-gradient(circle at 60% 60%, rgba(220, 237, 193, 0.35), rgba(220, 237, 193, 0));
|
|
}
|
|
|
|
.aurora-3 {
|
|
bottom: -180px;
|
|
right: -160px;
|
|
animation-delay: 12s;
|
|
background: radial-gradient(circle at 50% 50%, rgba(129, 199, 132, 0.3), rgba(129, 199, 132, 0));
|
|
}
|
|
|
|
@keyframes float {
|
|
0% {
|
|
transform: translate3d(0, 0, 0) scale(1);
|
|
}
|
|
25% {
|
|
transform: translate3d(40px, -30px, 0) scale(1.05);
|
|
}
|
|
50% {
|
|
transform: translate3d(-35px, 25px, 0) scale(0.95);
|
|
}
|
|
75% {
|
|
transform: translate3d(20px, 35px, 0) scale(1.08);
|
|
}
|
|
100% {
|
|
transform: translate3d(0, 0, 0) scale(1);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.aurora {
|
|
width: 280px;
|
|
height: 280px;
|
|
opacity: 0.24;
|
|
}
|
|
|
|
.aurora-1 {
|
|
top: -110px;
|
|
left: -130px;
|
|
}
|
|
|
|
.aurora-2 {
|
|
top: 45%;
|
|
left: 35%;
|
|
}
|
|
|
|
.aurora-3 {
|
|
bottom: -140px;
|
|
right: -120px;
|
|
}
|
|
}
|