59 lines
1.1 KiB
CSS
59 lines
1.1 KiB
CSS
.fireworks {
|
|
/*position: fixed;*/
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
/*overflow: hidden;*/
|
|
z-index: 10;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
100% {
|
|
transform: translateY(calc(var(--trailEndY) - var(--trailStartY)));
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Animation für die Partikel */
|
|
@keyframes fireworkParticle {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translate(0, 0);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate(var(--x), var(--y));
|
|
}
|
|
}
|
|
|
|
.firework {
|
|
position: absolute;
|
|
width: 5px;
|
|
height: 5px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
animation: fireworkParticle 1.5s ease-out forwards;
|
|
filter: blur(1px);
|
|
} |