Cách dùng CSS Hiệu Ứng Pháo Giấy
- Bản xem trước bắt đầu với Confetti nhiều màu.
- Chọn số lượng, kích thước và tốc độ; bật Sway để các mảnh giấy đung đưa.
- Tắt Mixed colors nếu bạn chỉ muốn một màu thương hiệu.
- Sao chép mã và dán vào trang cảm ơn hoặc trang thành công của bạn.
Pháo giấy xoay tròn
Mỗi mảnh là một hình chữ nhật nhỏ, rơi kèm chuyển động lắc nhẹ và xoay 3D (rotate3d), nên nó lật qua lại giữa mặt và cạnh giống như giấy thật. Màu của từng mảnh được chọn bằng một CSS custom property.
Nếu cần hiệu ứng tuyết, mưa hoặc hình dạng riêng, hãy xem Particle Animation Generator.
Cũng được tìm dưới tên: hiệu ứng pháo giấy css, confetti animation css, pháo giấy rơi css, hiệu ứng confetti website, css confetti, hiệu ứng nền pháo giấy, animation chúc mừng css.
Các công cụ dùng kèm tốt với CSS Hiệu Ứng Pháo Giấy
- 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.
- 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.
- Trình tạo animation CSS — Thiết kế animation CSS trên timeline keyframe thực tế.
Câu hỏi thường gặp
Làm thế nào để thêm pháo giấy vào trang cảm ơn?
Sao chép HTML + CSS và dán vào trang. Pháo giấy sẽ rơi liên tục phía trên trang và không chặn các lần nhấp chuột.
Tôi có thể dùng màu thương hiệu của mình không?
Có. Tắt Mixed colors và chọn màu bạn muốn, hoặc chỉnh các giá trị --c trong HTML.
Pháo giấy có thể chỉ bắn một lần thay vì lặp lại không?
Trình tạo này tạo hiệu ứng rơi liên tục. Nếu muốn bắn một lần, hãy đổi infinite thành 1 trong quy tắc animation để mỗi mảnh chỉ rơi một lần.
Tôi có thể cài CSS Hiệu Ứng Pháo Giấy như một ứng dụng web và dùng khi không có mạng không?
Có. CSS Hiệu Ứng Pháo Giấy 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.