40 lines
1.3 KiB
CSS
40 lines
1.3 KiB
CSS
.snowflakes {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none; /* Make snowflakes non-interactive */
|
|
overflow: hidden; /* Hide overflow */
|
|
z-index: 998; /* Ensure snowflakes are above other content */
|
|
}
|
|
|
|
.snowflake {
|
|
position: absolute;
|
|
top: -10%; /* Start above the top of the screen */
|
|
color: white; /* Snowflake color */
|
|
font-size: 1em; /* Size of the snowflake; adjust as needed */
|
|
opacity: 0.5; /* Transparency */
|
|
animation: fall linear infinite; /* Apply the fall animation */
|
|
}
|
|
|
|
/* Falling animation */
|
|
@keyframes fall {
|
|
0% {
|
|
transform: translateX(0) translateY(0); /* Start position */
|
|
}
|
|
100% {
|
|
transform: translateX(-5vw) translateY(120vh); /* End position */
|
|
opacity: 0.1; /* Optional: fade out */
|
|
}
|
|
}
|
|
|
|
/* Randomize snowflake size and animation */
|
|
.snowflake:nth-child(1) { animation-duration: 6s; left: 10%; font-size: 0.8em;}
|
|
.snowflake:nth-child(2) { animation-duration: 8s; left: 20%; font-size: 3em;}
|
|
.snowflake:nth-child(3) { animation-duration: 5s; left: 30%; font-size: 4em;}
|
|
.snowflake:nth-child(4) { animation-duration: 7s; left: 40%; font-size: 0.9em;}
|
|
.snowflake:nth-child(5) { animation-duration: 10s; left: 50%; font-size: 2em;}
|
|
|
|
/* Add more child selectors for additional snowflakes */
|