81 lines
1.7 KiB
CSS
81 lines
1.7 KiB
CSS
.summer-container {
|
|
display: block;
|
|
position: fixed;
|
|
overflow: hidden;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
.summer-bubble {
|
|
position: fixed;
|
|
bottom: -50px;
|
|
z-index: 15;
|
|
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0.05));
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
|
|
|
|
will-change: transform, bottom;
|
|
animation-name: summer-rise, summer-wobble;
|
|
animation-timing-function: linear, ease-in-out;
|
|
animation-iteration-count: infinite, infinite;
|
|
animation-duration: 10s, 3s;
|
|
}
|
|
|
|
.summer-dust {
|
|
position: fixed;
|
|
bottom: -10px;
|
|
z-index: 12;
|
|
background-color: rgba(255, 223, 186, 0.6);
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 5px rgba(255, 223, 186, 0.4);
|
|
|
|
will-change: transform, bottom;
|
|
animation-name: summer-rise, summer-drift;
|
|
animation-timing-function: linear, ease-in-out;
|
|
animation-iteration-count: infinite, infinite;
|
|
animation-duration: 20s, 5s;
|
|
}
|
|
|
|
@keyframes summer-rise {
|
|
0% {
|
|
bottom: -10%;
|
|
}
|
|
100% {
|
|
bottom: 110%;
|
|
}
|
|
}
|
|
|
|
@keyframes summer-wobble {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
33% {
|
|
transform: translateX(15px);
|
|
}
|
|
66% {
|
|
transform: translateX(-15px);
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes summer-drift {
|
|
0% {
|
|
transform: translateX(0) translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateX(30px) translateY(-20px);
|
|
}
|
|
100% {
|
|
transform: translateX(0) translateY(0);
|
|
}
|
|
}
|
|
|
|
|