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

working

Browse Source
This commit is contained in:
MLH
2024-11-29 00:32:05 +01:00
parent 09cc395467
commit f32527e79e
2 changed files with 43 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
fireworks.css
View File

@ -17,7 +17,8 @@
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9); /* standard colors */
animation: explode 1s ease-out forwards;
animation: explode 2.5s ease-out forwards, colorShift 2.5s linear infinite;
/*animation: explode 1s ease-out forwards;*/
transform-origin: center;
}
@ -28,17 +29,29 @@
opacity: 1;
}
100% {
transform: translate(var(--x), var(--y)) scale(0.3);
transform: translate(var(--x), var(--y)) scale(0.4);
opacity: 0;
}
}
/* optional: different colors for odd and even fireworks */
.firework:nth-child(odd) {
background: rgba(255, 100, 100, 0.9); /* red */
/* colors for the fireworks */
@keyframes colorShift {
0% {
background: rgba(255, 0, 0, 1); /* Kräftiges Rot */
}
.firework:nth-child(even) {
background: rgba(100, 100, 255, 0.9); /* blue */
20% {
background: rgba(0, 255, 0, 1); /* Kräftiges Grün */
}
40% {
background: rgba(0, 0, 255, 1); /* Kräftiges Blau */
}
60% {
background: rgba(255, 255, 0, 1); /* Gelb */
}
80% {
background: rgba(255, 0, 255, 1); /* Magenta */
}
100% {
background: rgba(0, 255, 255, 1); /* Türkis */
}
}