Cara menggunakan Animasi Hujan CSS
- Pratinjau dimulai dengan Hujan. Naikkan Jumlah untuk hujan deras.
- Atur ukuran tetesan (panjangnya) dan kecepatannya.
- Gunakan Angin untuk memiringkan hujan — setiap tetesan miring searah geraknya.
- Salin kodenya.
Cara hujan digambar
Setiap tetesan adalah elemen tipis dengan gradasi dari transparan ke warna tetesan, sehingga terlihat seperti goresan gerak. Tetesan jatuh dengan cepat dalam garis lurus; saat ada angin, tetesan bergerak ke samping dalam satuan tinggi kontainer dan diputar dengan sudut yang sama, jadi selalu menghadap arah geraknya. Latar belakang gelap kebiruan membuat efeknya lebih meyakinkan.
Untuk salju, bintang, atau confetti, lihat Generator Animasi Partikel.
Juga dicari sebagai: efek hujan css, animasi hujan html, efek hujan website, tetesan hujan css, animasi latar hujan.
Tool yang cocok dipakai bersama Animasi Hujan CSS
- Efek Salju CSS — Biarkan salju turun di websitemu saat liburan: salju lembut atau kepingan salju, gerimis ringan atau badai salju.
- Animasi Bintang Jatuh — Tampilkan shooting star yang melesat di latar langit malam, atau biarkan bentuk bintang melayang turun dan berputar.
- 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 efek hujan dengan CSS?
Animasikan banyak garis tipis bergradasi dari atas tepi atas hingga bawah tepi bawah dengan timing linear dan durasi pendek yang sedikit berbeda-beda. Generator ini menulis CSS-nya untuk kamu.
Bisakah hujan jatuh dengan sudut?
Bisa — atur Angin. Tetesan akan bergerak ke samping dan diputar agar sesuai.
Bisakah saya menambahkan hujan ke satu gambar atau hero?
Bisa — pilih Satu bagian lalu tempel kodenya di dalam hero, yang membutuhkan position: relative.
Bisakah saya memasang Animasi Hujan CSS sebagai aplikasi web dan memakainya offline?
Bisa. Animasi Hujan CSS 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.