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

This commit is contained in:
schmop 2026-05-31 17:34:05 +02:00
parent 83c36d2052
commit 6f7f4511d0

View File

@ -147,12 +147,34 @@
.moon { .moon {
position: absolute; position: absolute;
filter: drop-shadow(0 0 18px rgba(255, 233, 163, 0.85));
animation: moonpath 12s linear infinite; 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 { @keyframes moonpath {
0% { left: -16%; top: 36%; } 0% { left: -16%; top: 36%; }
50% { top: 14%; } 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%; } 100% { left: 112%; top: 36%; }
} }