CodeDevMLH/Seasonals-Fireworks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

some fixes

Browse Source
This commit is contained in:
MLH
2024-11-28 23:56:50 +01:00
parent af3ec8c7b4
commit 09cc395467
2 changed files with 23 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
fireworks.css
View File

@ -1,4 +1,4 @@
/* Der Container für das Feuerwerk */
/* container for fireworks */
.fireworks {
pointer-events: none;
position: fixed;
@ -7,38 +7,38 @@
width: 100%;
height: 100%;
overflow: hidden;
z-index: 10; /* Über andere Elemente legen */
z-index: 10; /* put it on top */
}
/* Jede Partikel eines Feuerwerks */
/* every firework particle */
.firework {
position: absolute;
width: 4px;
height: 4px;
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9); /* Standardfarbe */
background: rgba(255, 255, 255, 0.9); /* standard colors */
animation: explode 1s ease-out forwards;
transform-origin: center;
}
/* Animation für die Explosion */
/* animation for the explosion */
@keyframes explode {
0% {
transform: scale(0.5);
opacity: 1;
}
100% {
transform: translate(var(--x), var(--y)) scale(0.2);
transform: translate(var(--x), var(--y)) scale(0.3);
opacity: 0;
}
}
/* Optional: Farbwechsel für die Partikel */
/* optional: different colors for odd and even fireworks */
.firework:nth-child(odd) {
background: rgba(255, 100, 100, 0.9); /* Rot */
background: rgba(255, 100, 100, 0.9); /* red */
}
.firework:nth-child(even) {
background: rgba(100, 100, 255, 0.9); /* Blau */
background: rgba(100, 100, 255, 0.9); /* blue */
}