Cách dùng Hiệu ứng tuyết rơi CSS
- Bản xem trước bắt đầu với Tuyết; chọn Bông tuyết để có bông tuyết sáu cánh.
- Đặt số lượng bông tuyết, kích thước và tốc độ; thêm Gió để tuyết bay nghiêng.
- Chọn toàn bộ trang hoặc một phần trang.
- Sao chép mã và dán ngay trước
</body>.
Hiệu ứng tuyết không cần thư viện
Tuyết là tập hợp các chấm nhỏ, mờ rơi xuống với tốc độ hơi khác nhau — bông nhỏ rơi chậm hơn, tạo cảm giác có chiều sâu — và mỗi bông đung đưa nhẹ sang hai bên. Mọi thứ chạy bằng hoạt ảnh CSS của transform, nên mượt và nhẹ. Lớp phủ dùng pointer-events: none để liên kết và nút bấm vẫn hoạt động bình thường.
Thêm nhiều hiệu ứng khác — mưa, sao băng, pháo giấy, hay SVG riêng của bạn — có trong Particle Animation Generator.
Cũng được tìm dưới tên: tuyết rơi css, hiệu ứng tuyết rơi website, snow effect css, hiệu ứng bông tuyết css, tuyết rơi noel html, hiệu ứng tuyết giáng sinh, snowflake animation css.
Các công cụ dùng kèm tốt với Hiệu ứng tuyết rơi CSS
- Hiệu ứng mưa CSS — Làm mưa rơi trên trang hoặc phần hero — từ mưa phùn nhẹ đến mưa rào xiên.
- 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 thế nào để thêm tuyết rơi vào website dịp Giáng sinh?
Sao chép mã HTML + CSS ở đây và dán ngay trước thẻ đóng body, hoặc vào khối Custom HTML / Embed trong WordPress, Webflow hay Shopify. Gỡ bỏ sau mùa lễ.
Tuyết rơi có chặn click không?
Không. Lớp phủ dùng pointer-events: none, nên người truy cập vẫn click được mọi thứ bên dưới.
Có thể chỉ cho tuyết rơi ở phần header không?
Có — chọn Một phần trang, dán mã vào bên trong header và đặt position: relative cho header.
Tôi có thể cài Hiệu ứng tuyết rơi CSS như một ứng dụng web và dùng khi không có mạng không?
Có. Hiệu ứng tuyết rơi 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.