Cách dùng Hiệu ứng mưa CSS
- Bản xem trước bắt đầu với Mưa. Tăng Số lượng để có mưa rào.
- Đặt kích thước giọt (độ dài) và tốc độ.
- Dùng Gió để làm mưa nghiêng — mỗi giọt sẽ nghiêng theo hướng rơi.
- Sao chép mã.
Cách vẽ mưa
Mỗi giọt là một phần tử mỏng có gradient từ trong suốt đến màu giọt mưa, nên trông như một vệt chuyển động. Giọt rơi nhanh theo đường thẳng; khi có gió, giọt di chuyển ngang theo đơn vị chiều cao của vùng chứa và được xoay cùng góc đó, nên luôn hướng theo đường đi. Nền tối hơi xanh sẽ làm hiệu ứng nổi bật hơn.
Muốn tạo tuyết, sao hoặc confetti, hãy xem Công cụ tạo hiệu ứng hạt.
Cũng được tìm dưới tên: css mưa rơi, animation mưa html, hiệu ứng mưa rơi website, giọt mưa css, animation mưa nền.
Các công cụ dùng kèm tốt với Hiệu ứng mưa CSS
- Hiệu ứng tuyết rơi CSS — Cho website của bạn tuyết rơi dịp lễ: tuyết mềm hoặc bông tuyết, lất phất nhẹ hay bão tuyết.
- Hiệu Ứng Sao Băng CSS — Cho sao băng lướt qua nền bầu trời đêm, hoặc để các hình ngôi sao trôi xuống và xoay tròn.
- CSS Hiệu Ứng Pháo Giấy — Ăn mừng ra mắt sản phẩm, lượt đăng ký hay sinh nhật với pháo giấy rơi nhiều màu, bay lượn và xoay tròn.
- Trình tạo CSS Keyframes — Trình chỉnh sửa trực quan cho @keyframes.
Câu hỏi thường gặp
Làm hiệu ứng mưa rơi bằng CSS như thế nào?
Tạo nhiều vệt gradient mỏng, animation từ phía trên mép trên đến dưới mép dưới, dùng timing tuyến tính và thời lượng ngắn, hơi khác nhau giữa các giọt. Công cụ này sẽ tự viết đoạn CSS đó cho bạn.
Mưa có thể rơi xiên không?
Có — chỉnh Gió. Các giọt sẽ di chuyển ngang và được xoay cho khớp.
Có thể thêm mưa vào một ảnh hoặc phần hero không?
Có — chọn Một khu vực rồi dán mã vào trong phần hero, phần này cần position: relative.
Tôi có thể cài Hiệu ứng mưa CSS như một ứng dụng web và dùng khi không có mạng không?
Có. Hiệu ứng mưa CSS là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.