92 lines
2.1 KiB
CSS
92 lines
2.1 KiB
CSS
.spring-container {
|
|
display: block;
|
|
position: fixed;
|
|
overflow: hidden;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* Pollen */
|
|
.spring-pollen {
|
|
position: fixed;
|
|
z-index: 14;
|
|
background-color: #fffacd;
|
|
border-radius: 50%;
|
|
opacity: 0.6;
|
|
box-shadow: 0 0 4px rgba(255, 250, 205, 0.4);
|
|
|
|
will-change: transform;
|
|
animation-name: spring-float;
|
|
animation-timing-function: linear;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
/* Sunbeams */
|
|
.spring-sunbeam {
|
|
position: fixed;
|
|
top: -50%;
|
|
height: 200%;
|
|
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 200, 0.08) 50%, rgba(255, 255, 255, 0));
|
|
z-index: 5;
|
|
transform-origin: top center;
|
|
pointer-events: none;
|
|
|
|
animation-name: spring-beam-pulse;
|
|
animation-timing-function: ease-in-out;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
/* Grass */
|
|
.spring-grass-container {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 80px;
|
|
z-index: 1002;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.spring-grass {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 3px;
|
|
border-radius: 100% 0 0 0;
|
|
transform-origin: bottom center;
|
|
background-color: #4caf50;
|
|
|
|
will-change: transform;
|
|
animation-name: spring-grass-sway;
|
|
animation-timing-function: ease-in-out;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
|
|
|
|
@keyframes spring-float {
|
|
0% { transform: translateX(0) translateY(0); }
|
|
25% { transform: translateX(20px) translateY(-10px); }
|
|
50% { transform: translateX(40px) translateY(0); }
|
|
75% { transform: translateX(20px) translateY(10px); }
|
|
100% { transform: translateX(0) translateY(0); }
|
|
}
|
|
|
|
@keyframes spring-beam-pulse {
|
|
0% { opacity: 0.3; transform: rotate(45deg) scaleX(1); }
|
|
50% { opacity: 0.6; transform: rotate(45deg) scaleX(1.1); }
|
|
100% { opacity: 0.3; transform: rotate(45deg) scaleX(1); }
|
|
}
|
|
|
|
@keyframes spring-grass-sway {
|
|
0% { transform: rotate(0deg); }
|
|
50% { transform: rotate(8deg); }
|
|
100% { transform: rotate(0deg); }
|
|
}
|
|
|
|
|