working
This commit is contained in:
104
fireworks.css
104
fireworks.css
@ -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);
|
||||
}
|
Reference in New Issue
Block a user