Cách dùng Hiệu Ứng Sao Băng CSS
- Xem trước bắt đầu với Sao băng. Khoảng nghỉ quyết định mỗi ngôi sao xuất hiện thưa hay dày.
- Đặt độ dài đuôi bằng Kích thước và góc bay bằng Gió.
- Chọn Sao rơi để có các hình ngôi sao trôi xuống và xoay.
- Sao chép code vào một khu vực nền tối.
Sao băng chỉ với một keyframe
Một ngôi sao băng là một vệt gradient mỏng — đuôi trong suốt, đầu sáng phát quang — được xoay theo hướng bay. Keyframe đưa nó đi qua khung trong phần đầu của chu kỳ rồi giữ nó ẩn phần còn lại, nên mỗi ngôi sao lướt qua rồi chờ; các độ trễ khác nhau giúp chúng xuất hiện so le.
Thêm nhiều hiệu ứng khác có trong Particle Animation Generator.
Cũng được tìm dưới tên: animation sao băng css, sao băng css, animation thiên thạch css, hiệu ứng bầu trời đêm css, hiệu ứng sao rơi, animation ngôi sao css.
Các công cụ dùng kèm tốt với Hiệu Ứng Sao Băng 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 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.
- 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 để tạo animation sao băng bằng CSS?
Cho một vệt gradient mỏng chạy chéo qua màn hình, xoay theo đường đi của nó, trong phần đầu của keyframe, và giữ nó ngoài màn hình phần còn lại. Chọn Sao băng ở đây rồi sao chép code.
Làm sao để sao băng xuất hiện thưa hơn?
Tăng Khoảng nghỉ và giảm Số lượng.
Tôi có thể dùng hình ngôi sao của riêng mình không?
Có — chọn Ảnh SVG / hình ảnh của tôi rồi tải lên, hoặc Emoji và nhập một ngôi sao.
Tôi có thể cài Hiệu Ứng Sao Băng CSS như một ứng dụng web và dùng khi không có mạng không?
Có. Hiệu Ứng Sao Băng 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.