80 lines
1.6 KiB
CSS
80 lines
1.6 KiB
CSS
.background-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
overflow: hidden;
|
|
background: linear-gradient(180deg, #f0f9f2 0%, #f7fff8 55%, #eef7f1 100%);
|
|
}
|
|
|
|
.floating-blob {
|
|
position: absolute;
|
|
width: 420px;
|
|
height: 420px;
|
|
border-radius: 55% 45% 60% 40% / 50% 50% 45% 55%;
|
|
filter: blur(0px);
|
|
opacity: 0.28;
|
|
background: radial-gradient(circle at 30% 30%, rgba(129, 199, 132, 0.6), rgba(129, 199, 132, 0));
|
|
animation: drift 36s ease-in-out infinite;
|
|
}
|
|
|
|
.blob-1 {
|
|
top: -120px;
|
|
left: -160px;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.blob-2 {
|
|
right: -120px;
|
|
bottom: -160px;
|
|
animation-delay: 8s;
|
|
background: radial-gradient(circle at 70% 70%, rgba(76, 175, 80, 0.5), rgba(76, 175, 80, 0));
|
|
}
|
|
|
|
.blob-3 {
|
|
top: 45%;
|
|
left: 55%;
|
|
animation-delay: 16s;
|
|
background: radial-gradient(circle at 40% 60%, rgba(165, 214, 167, 0.5), rgba(165, 214, 167, 0));
|
|
}
|
|
|
|
@keyframes drift {
|
|
0% {
|
|
transform: translate3d(0, 0, 0) scale(1);
|
|
}
|
|
33% {
|
|
transform: translate3d(30px, -40px, 0) scale(1.05);
|
|
}
|
|
66% {
|
|
transform: translate3d(-25px, 30px, 0) scale(0.95);
|
|
}
|
|
100% {
|
|
transform: translate3d(0, 0, 0) scale(1);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.floating-blob {
|
|
width: 260px;
|
|
height: 260px;
|
|
opacity: 0.22;
|
|
}
|
|
|
|
.blob-1 {
|
|
top: -80px;
|
|
left: -120px;
|
|
}
|
|
|
|
.blob-2 {
|
|
right: -140px;
|
|
bottom: -140px;
|
|
}
|
|
|
|
.blob-3 {
|
|
top: 55%;
|
|
left: 48%;
|
|
}
|
|
}
|