So nutzt du: Falling Stars Animation
- Die Vorschau startet mit Sternschnuppen. Mit Pause zwischen legst du fest, wie selten jede einzelne erscheint.
- Stelle die Schweiflänge mit Größe und den Winkel mit Wind ein.
- Wähle Fallende Sterne für Sternformen, die herabschweben und sich drehen.
- Kopiere den Code in einen dunklen Abschnitt.
Sternschnuppen mit einem Keyframe
Eine Sternschnuppe ist ein dünner Verlaufsstreifen – transparenter Schweif, heller leuchtender Kopf –, der in seine Flugrichtung gedreht wird. Der Keyframe bewegt sie im ersten Teil ihres Zyklus über die Box und hält sie für den Rest versteckt. So blitzt jeder Stern kurz auf und wartet dann; unterschiedliche Verzögerungen verteilen sie über die Zeit.
Weitere Effekte findest du im Particle Animation Generator.
Auch gesucht als: sternschnuppe css, shooting star animation, meteor animation css, nachthimmel animation css, fallende sterne effekt, stern animation css.
Passende Tools zu: Falling Stars Animation
- CSS-Schneeeffekt — Lass es auf deiner Website zur Weihnachtszeit schneien: sanfter Schnee oder Schneeflocken, leichtes Gestöber oder ein Schneesturm.
- CSS-Regen-Animation — Lass es auf einer Seite oder einem Hero-Bereich regnen — von leichtem Nieselregen bis zu einem schrägen Wolkenbruch.
- Konfetti-Animation CSS — Feiere einen Launch, eine Anmeldung oder einen Geburtstag mit fallendem Konfetti, das in gemischten Farben flattert und taumelt.
- CSS Keyframes Generator — Ein visueller Editor für @keyframes.
Häufige Fragen
Wie erstelle ich eine Sternschnuppen-Animation in CSS?
Animiere einen dünnen Verlaufsstreifen diagonal über den Bildschirm, gedreht passend zu seinem Weg, im ersten Teil des Keyframes, und halte ihn für den Rest außerhalb des Sichtbereichs. Wähle hier Sternschnuppen und kopiere den Code.
Wie mache ich sie seltener?
Erhöhe Pause zwischen und verringere Anzahl.
Kann ich mein eigenes Sternbild verwenden?
Ja – wähle Mein SVG / Bild und lade es hoch, oder Emoji und gib einen Stern ein.
Kann ich Falling Stars Animation als Web-App installieren und offline nutzen?
Ja. Falling Stars Animation ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.