Animasi Bintang Jatuh — Bintang Jatuh dengan CSS

Tampilkan shooting star yang melesat di latar langit malam, atau biarkan bentuk bintang melayang turun dan berputar. Atur seberapa sering muncul, panjang ekor, sudut dan warnanya.

Diperbarui

Data kamu tidak pernah meninggalkan komputer kamu. Semua proses berjalan 100% secara lokal di browser kamu.

Apakah alat ini membantu?0.0 0 penilaian
Buat salju, hujan, bintang jatuhConfetti, daun, atau gelembung jatuh di websitemu.Generator Animasi Partikel →

Cara menggunakan Animasi Bintang Jatuh

  1. Pratinjau dimulai dengan Shooting stars. Jeda antar menentukan seberapa jarang setiap bintang muncul.
  2. Atur panjang ekor dengan Size dan sudutnya dengan Wind.
  3. Pilih Falling stars untuk bentuk bintang yang melayang turun dan berputar.
  4. Salin kodenya ke bagian yang gelap.

Shooting star dengan satu keyframe

Shooting star adalah garis gradien tipis — ekor transparan, kepala bercahaya terang — yang diputar mengikuti arah geraknya. Keyframe menggerakkannya melintasi kotak pada bagian awal siklus dan menyembunyikannya sisa waktu, sehingga setiap bintang melintas sebentar lalu menunggu; delay yang berbeda membuat kemunculannya tersebar.

Efek lainnya tersedia di Particle Animation Generator.

Juga dicari sebagai: animasi bintang jatuh css, shooting star css, animasi shooting star, animasi meteor css, animasi langit malam css, efek bintang jatuh, animasi bintang css.

Tool yang cocok dipakai bersama Animasi Bintang Jatuh

  • Efek Salju CSS — Biarkan salju turun di websitemu saat liburan: salju lembut atau kepingan salju, gerimis ringan atau badai salju.
  • Animasi Hujan CSS — Buat halaman atau bagian hero kamu hujan — dari gerimis tipis hingga hujan deras yang miring.
  • Confetti Animation CSS — Rayakan peluncuran, pendaftaran atau ulang tahun dengan konfeti jatuh yang berkibar dan berputar dalam berbagai warna.
  • Generator CSS Keyframes — Editor visual untuk @keyframes.

Pertanyaan yang sering diajukan

Bagaimana cara membuat animasi shooting star dengan CSS?
Gerakkan garis gradien tipis secara diagonal melintasi layar, diputar sesuai jalurnya, pada bagian awal keyframe, lalu biarkan di luar layar untuk sisa waktunya. Pilih Shooting stars di sini dan salin kodenya.
Bagaimana cara membuatnya lebih jarang muncul?
Naikkan Jeda antar dan turunkan How many.
Bisakah saya memakai gambar bintang sendiri?
Bisa — pilih My SVG / image lalu unggah filenya, atau Emoji dan ketik bintang.
Bisakah saya memasang Animasi Bintang Jatuh sebagai aplikasi web dan memakainya offline?
Bisa. Animasi Bintang Jatuh adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.

Tool terkait