Thomas/Bratonien-Adventskalender
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adventskalender/2025/css/main.css aktualisiert

Browse Source
This commit is contained in:
Thomas Dannenberg
2025-11-04 12:03:24 +00:00
parent acff3acd8e
commit 14549f967a
1 changed files with 42 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
adventskalender/2025/css/main.css
View File

@@ -6,7 +6,8 @@
font-display: swap; font-display: swap;
} }
/* === Adventskalender Türchen (finale Version mit Glitzern) === */ /* === ADVENTSKALENDER TÜRCHEN – FINALE VERSION MIT GLITTERSTAUB === */
.door { .door {
position: absolute; position: absolute;
display: flex; display: flex;
@@ -14,11 +15,11 @@
justify-content: center; justify-content: center;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
/* Basis-Verlauf – CI-Farben mit Transparenz */ /* Verlauf nach Bratonien-CI */
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
color-mix(in srgb, var(--ci-darkgreen) 35%, transparent), color-mix(in srgb, var(--ci-darkgreen) 60%, transparent),
color-mix(in srgb, var(--ci-blue) 35%, transparent) color-mix(in srgb, var(--ci-blue) 60%, transparent)
); );
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
@@ -39,60 +40,64 @@
cursor: pointer; cursor: pointer;
transition: transition:
transform 0.2s ease, transform 0.25s ease,
box-shadow 0.2s ease, box-shadow 0.25s ease;
background 0.2s ease;
} }
/* === Keyframes === */ /* === Hover-Grundreaktion === */
@keyframes glitter-sheen {
0% { background-position: -200% 0; opacity: 0.0; }
30% { opacity: 1; }
70% { opacity: 1; }
100% { background-position: 200% 0; opacity: 0.0; }
}
@keyframes sparkle {
0%,100% { opacity: 0; }
40%,60% { opacity: 1; }
}
/* === Hover Effekte === */
.door:hover { .door:hover {
transform: scale(1.05); transform: scale(1.05);
box-shadow: box-shadow:
0 0 16px color-mix(in srgb, var(--ci-gold) 60%, transparent), 0 0 18px color-mix(in srgb, var(--ci-gold) 60%, transparent),
inset 0 0 10px rgba(255,255,255,0.35); inset 0 0 10px rgba(255,255,255,0.35);
} }
/* Goldener Schimmer über dem Türchen */ /* === Goldener Schimmer (Lichtschein) === */
@keyframes glitter-sheen {
0% { background-position: -150% 0; opacity: 0.0; }
25% { opacity: 1; }
75% { opacity: 1; }
100% { background-position: 150% 0; opacity: 0.0; }
}
.door:hover::after { .door:hover::after {
content: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
border-radius: inherit; border-radius: inherit;
pointer-events: none; pointer-events: none;
background: linear-gradient( background-image:
120deg, repeating-linear-gradient(
transparent 0%, 115deg,
color-mix(in srgb, var(--ci-gold) 60%, transparent) 45%, transparent 0%,
transparent 90% color-mix(in srgb, var(--ci-gold) 30%, transparent) 2%,
); transparent 4%,
color-mix(in srgb, var(--ci-creamwhite) 25%, transparent) 5%,
transparent 7%
);
background-size: 200% 100%; background-size: 200% 100%;
animation: glitter-sheen 1.8s ease-in-out 1; mix-blend-mode: screen;
animation: glitter-sheen 1.6s linear 1;
z-index: 1; /* unter dem Staub */
}
/* === Feenstaub-Glitter === */
@keyframes fairy-glitter {
0% { opacity: 0; transform: scale(0.6) translateY(0); }
10% { opacity: 1; }
40% { opacity: 0.9; transform: scale(1.1) translateY(-5%); }
100% { opacity: 0; transform: scale(1.6) translateY(-20%); }
} }
/* Kleine Glitzerpunkte */
.door:hover::before { .door:hover::before {
content: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
border-radius: inherit; border-radius: inherit;
pointer-events: none; pointer-events: none;
background-image: z-index: 2; /* über dem Schimmer, unter dem Text */
radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%), opacity: 0;
radial-gradient(circle, rgba(255,255,255,0.6) 0%, transparent 70%); background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, transparent 70%);
background-size: 10% 10%, 8% 8%; filter: url(#sparkle-filter);
background-position: 40% 30%, 70% 65%; animation: fairy-glitter 1.6s ease-out;
animation: sparkle 1.8s ease-in-out 1;
} }