This commit is contained in:
MLH
2024-11-29 22:24:00 +01:00
parent 3d77207101
commit fa329c5e9c
3 changed files with 149 additions and 110 deletions

View File

@ -1,73 +1,59 @@
/* container for fireworks */
.fireworks {
pointer-events: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 10; /* put it on top */
}
/* every firework particle */
.firework {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color);
animation: move 2.5s ease-out, fadeOut 2.5s ease-out, shrink 2.5s ease-out;
/*animation: explode 2.5s ease-out forwards, colorShift 2.5s linear infinite;*/
transform-origin: center;
}
/* every rocket */
.rocket {
position: absolute;
width: 4px;
height: 20px;
background: var(--color);
border-radius: 2px;
animation: rise 1s ease-out;
}
/* movement of particles */
@keyframes move {
from {
transform: translate(0, 0);
}
to {
transform: translate(var(--x), var(--y));
}
/*position: fixed;*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
/*overflow: hidden;*/
z-index: 10;
}
/* fadeout of particles */
@keyframes fadeOut {
from {
.rocket-trail {
position: absolute;
left: var(--trailX);
top: var(--trailStartY);
width: 4px;
/*height: 4px;*/
height: 60px;
/*background: white;*/
background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
filter: blur(2px);
/*border-radius: 50%;
box-shadow: 0 0 8px 2px white;*/
animation: rocket-trail-animation 1s linear forwards;
}
@keyframes rocket-trail-animation {
0% {
transform: translateY(0);
opacity: 1;
}
to {
100% {
transform: translateY(calc(var(--trailEndY) - var(--trailStartY)));
opacity: 0;
}
}
/* shrinking of particles */
@keyframes shrink {
from {
transform: scale(1);
/* Animation für die Partikel */
@keyframes fireworkParticle {
0% {
opacity: 1;
transform: translate(0, 0);
}
to {
transform: scale(0.5);
100% {
opacity: 0;
transform: translate(var(--x), var(--y));
}
}
/* movement of rockets */
@keyframes rise {
from {
transform: translate(0, 100vh);
}
to {
transform: translate(0, var(--y));
}
.firework {
position: absolute;
width: 5px;
height: 5px;
background: white;
border-radius: 50%;
animation: fireworkParticle 1.5s ease-out forwards;
filter: blur(1px);
}