diff --git a/adventskalender/2025/css/main.css b/adventskalender/2025/css/main.css index 28ff278..6fbeb66 100644 --- a/adventskalender/2025/css/main.css +++ b/adventskalender/2025/css/main.css @@ -45,29 +45,28 @@ background 0.2s ease; } +/* Glitzer-Animation */ @keyframes glitter { - 0% { - background-position: -200% 0; - } - 100% { - background-position: 200% 0; - } + 0% { background-position: -200% 0; opacity: 0.0; } + 30% { opacity: 1; } + 70% { opacity: 1; } + 100% { background-position: 200% 0; opacity: 0.0; } } -/* Hover-Effekt mit Glitzern */ -.door:hover { +/* Hover-Effekt mit goldenem Glitzern */ +.door:hover::after { + content: ""; + position: absolute; + inset: 0; + border-radius: inherit; + pointer-events: none; + + /* goldener Lichtschimmer */ background: linear-gradient( - 110deg, - color-mix(in srgb, var(--ci-gold) 40%, transparent) 0%, - color-mix(in srgb, var(--ci-creamwhite) 50%, transparent) 45%, - color-mix(in srgb, var(--ci-gold) 40%, transparent) 90% + 120deg, + transparent 0%, + color-mix(in srgb, var(--ci-gold) 60%, transparent) 45%, + transparent 90% ); background-size: 200% 100%; - animation: glitter 1.8s linear infinite; - - box-shadow: - 0 0 18px color-mix(in srgb, var(--ci-gold) 60%, transparent), - inset 0 0 12px rgba(255,255,255,0.4); - - transform: scale(1.05); -} \ No newline at end of file + animation: glitter 1.8s ease-in-out 1; \ No newline at end of file