Add seasonal themes for Birthday, Olympia, Space, Sports, and Underwater: implement CSS and JavaScript for visual effects and configurations

This commit is contained in:
CodeDevMLH
2026-02-24 23:40:21 +01:00
parent be4313d776
commit 861f431e50
10 changed files with 1118 additions and 0 deletions

View File

@@ -0,0 +1,71 @@
.olympia-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 9999;
overflow: hidden;
contain: strict;
}
.olympia-symbol {
position: absolute;
top: -10vh;
animation: olympia-fall linear infinite;
font-size: 3rem;
opacity: 0.95;
text-shadow: 0 0 10px rgba(255,255,255,0.2);
}
.olympia-symbol img {
width: 6vh;
height: auto;
max-width: 60px;
object-fit: contain;
}
.olympia-confetti {
position: absolute;
top: -5vh;
width: 8px;
height: 16px;
opacity: 0.85;
animation: olympia-confetti-fall linear infinite;
border-radius: 4px; /* slightly rounder confetti */
}
@keyframes olympia-fall {
0% {
transform: translateY(-10vh) rotate(var(--start-rot, 0deg));
opacity: 0;
}
10% {
opacity: 1;
}
85% {
opacity: 1;
}
100% {
transform: translateY(110vh) rotate(var(--end-rot, 360deg));
opacity: 0;
}
}
@keyframes olympia-confetti-fall {
0% {
transform: translateY(-5vh) rotateX(0deg) rotateY(0deg);
opacity: 0;
}
5% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(105vh) rotateX(720deg) rotateY(360deg);
opacity: 0;
}
}