ergaenze eine Konfetti-AnimationHEADmain

1 files changed, 57 insertions, 0 deletions

diff --git a/kuchenstand.css b/kuchenstand.css
index 02b7539..0c4a37e 100644
--- a/kuchenstand.css
+++ b/kuchenstand.css
@@ -38,3 +38,60 @@ ul.klassen-navigation li {
 ul li:hover {
   background-color: #111111;
 }
+
+.konfetti-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none; /* Prevent interaction */
+  overflow: hidden;
+}
+
+@keyframes konfetti-fall {
+  0% {
+    transform: translateY(-100%) rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(100vh) rotate(360deg);
+    opacity: 0.8;
+  }
+}
+
+.konfetti-stueck {
+  position: absolute;
+  width: 10px;
+  height: 20px;
+  background: var(--konfetti-color, red);
+  opacity: 0.9;
+  animation: konfetti-fall var(--fall-dauer, 4s) linear infinite;
+}
+
+/* Randomize confetti properties */
+.konfetti-stueck:nth-child(1) {
+  left: 10%;
+  --konfetti-farbe: #ff6347;
+  --fall-dauer: 3s;
+}
+.konfetti-stueck:nth-child(2) {
+  left: 25%;
+  --konfetti-farbe: #ffa500;
+  --fall-dauer: 5s;
+}
+.konfetti-stueck:nth-child(3) {
+  left: 40%;
+  --konfetti-farbe: #32cd32;
+  --fall-dauer: 4.5s;
+}
+.konfetti-stueck:nth-child(4) {
+  left: 60%;
+  --konfetti-farbe: #1e90ff;
+  --fall-dauer: 3.5s;
+}
+.konfetti-stueck:nth-child(5) {
+  left: 80%;
+  --konfetti-farbe: #ff69b4;
+  --fall-dauer: 6s;
+}