schmop/zahlzerlegung
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mond: Leuchten ohne CSS-Filter (Safari-Fix) und glatte Bogen-Laufbahn ohne Knick

Browse Source
This commit is contained in:
schmop 2026-05-31 17:34:05 +02:00
parent 83c36d2052
commit 6f7f4511d0
1 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/lib/components/home/StageAmbience.svelte
View File

@ -147,13 +147,35 @@
.moon {
position: absolute;
filter: drop-shadow(0 0 18px rgba(255, 233, 163, 0.85));
animation: moonpath 12s linear infinite;
}
/* Leuchten als radialer Verlauf statt drop-shadow-Filter:
Safari/WebKit rendert animierte Filter ausgefranst, ein Gradient bleibt sauber. */
.moon::before {
content: '';
position: absolute;
inset: -45%;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(255, 233, 163, 0.6) 0%,
rgba(255, 233, 163, 0.22) 45%,
transparent 70%
);
z-index: -1;
pointer-events: none;
}
/* Parabel-Bogen: top folgt einer Kurve (kein Knick am Scheitel), left läuft gleichmäßig. */
@keyframes moonpath {
0% { left: -16%; top: 36%; }
50% { top: 14%; }
100% { left: 112%; top: 36%; }
0% { left: -16%; top: 36%; }
12.5% { left: 0%; top: 26.4%; }
25% { left: 16%; top: 19.5%; }
37.5% { left: 32%; top: 15.4%; }
50% { left: 48%; top: 14%; }
62.5% { left: 64%; top: 15.4%; }
75% { left: 80%; top: 19.5%; }
87.5% { left: 96%; top: 26.4%; }
100% { left: 112%; top: 36%; }
}
@media (prefers-reduced-motion: reduce) {