Cách dùng Tạo Hiệu Ứng Hạt Rơi
- Chọn một hiệu ứng — và nhấn + Thêm lớp để xếp thêm (ví dụ tuyết cùng sao băng); xóa lớp bằng nút ×. Các hiệu ứng: tuyết, bông tuyết, mưa, sao băng, sao rơi, confetti, cánh hoa, lá, trái tim, bong bóng — hoặc SVG / ảnh của tôi để tải lên file riêng, hoặc Emoji.
- Điều chỉnh số lượng, kích thước, tốc độ, gió và độ lắc lư. Khoảng nghỉ giữa các lần giúp hạt xuất hiện thi thoảng, giống như sao băng.
- Chọn hiệu ứng phủ toàn bộ trang (lớp phủ cố định) hay chỉ một phần trang.
- Sao chép HTML + CSS (không cần JavaScript) hoặc phiên bản JavaScript ngắn hơn, hoặc tải trang demo về.
Cách hoạt động của hiệu ứng
Mỗi hạt là một phần tử <i> với kích thước, vị trí bắt đầu, thời lượng và độ trễ riêng, được lưu trong các CSS custom property. Một quy tắc @keyframes đưa hạt từ phía trên mép trên xuống dưới mép dưới; phần tử <b> bên trong thì lắc qua lại và xoay. Chỉ thuộc tính transform được tạo chuyển động, nên trình duyệt xử lý trên GPU mà không phải dựng lại bố cục trang.
.dp-fall { position: fixed; inset: 0; overflow: hidden; pointer-events: none; container-type: size; }
.dp-fall i { position: absolute; top: 0; animation: dp-fall var(--d) linear var(--t) infinite; }
@keyframes dp-fall { to { transform: translate(var(--dx), calc(100cqh + var(--s) * 3)); } }Độ trễ âm khiến mỗi hạt bắt đầu ở giữa hành trình rơi, nên màn hình đã đầy hạt ngay khi trang tải xong. pointer-events: none cho phép cú nhấp chuột xuyên qua lớp hiệu ứng, còn prefers-reduced-motion ẩn hiệu ứng với những khách đã tắt chuyển động trên thiết bị.
Dùng SVG của riêng bạn
Chọn SVG / ảnh của tôi và tải lên một file SVG, PNG, WebP hoặc GIF nhỏ — logo, bông tuyết hay đồng xu đều được. File sẽ được nhúng vào CSS dưới dạng data URI, nên đoạn code vẫn không cần thêm file nào. Các hình có sẵn được vẽ bằng CSS mask, vì vậy Nhiều màu có thể đổi màu từng hạt.
Xem thêm: CSS Keyframes Generator, CSS Animation Generator, SVG Blob Generator.
Cũng được tìm dưới tên: hiệu ứng tuyết rơi css, tuyết rơi css, hiệu ứng mưa css, hiệu ứng sao băng css, particle animation css, hiệu ứng confetti css, hiệu ứng lá rơi, tạo animation tuyết rơi.
Các công cụ dùng kèm tốt với Tạo Hiệu Ứng Hạt Rơi
- Tạo sóng SVG — Thiết kế đường phân cách section dạng sóng cho landing page: thêm hoặc xóa sóng (tối đa 6, mỗi sóng có màu, độ mờ và hình dạng riêng), chỉnh số đỉnh, chiều cao và độ mượt, chọn màu và đặt sóng ở phía trên hoặc phía dưới.
- Trình tạo CSS Loader — Chọn một trong 13 spinner loading chỉ dùng CSS, điều chỉnh kích thước, màu, độ dày và tốc độ, rồi sao chép HTML và CSS nhẹ, dễ truy cập — không cần hình ảnh, SVG hay JavaScript.
- Tạo CSS Gradient — Thiết kế gradient trực quan: kéo các điểm màu, đổi góc hoặc kiểu, chọn sẵn một mẫu có sẵn rồi sao chép CSS dùng được ngay, kèm màu nền đặc làm phương án dự phòng.
- Tạo hiệu ứng hover CSS — Thiết kế animation hover cho nút, thẻ, liên kết và icon.