Mond: Leuchten ohne CSS-Filter (Safari-Fix) und glatte Bogen-Laufbahn ohne Knick
This commit is contained in:
parent
83c36d2052
commit
6f7f4511d0
|
|
@ -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%; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user