Trình tạo Ảnh động CSS Sprite
Tự động tạo mã ảnh động CSS
từ nhiều hình ảnh hoặc một sprite sheet
📏 Cài đặt Lưới
⚙️ Cài đặt Ảnh động
🎞️ Thứ tự Khung hình
Kéo để sắp xếp lạiBạn cũng có thể thích
Giới thiệu Trình tạo Ảnh động Sprite
Trình tạo Ảnh động CSS Sprite là một công cụ trực tuyến miễn phí, tự động tạo mã CSS cho ảnh động sử dụng thuộc tính animation và hàm steps() từ nhiều hình ảnh khung hình hoặc một sprite sheet hiện có.
Không giống như ảnh động GIF, CSS sprite cung cấp hình ảnh chất lượng cao không bị giảm thiểu. Chúng cho phép bạn kiểm soát linh hoạt tốc độ phát lại, hướng và số lần lặp lại trực tiếp qua CSS. Ngoài ra, chúng còn giữ nguyên các vùng bán trong suốt (kênh alpha) một cách tuyệt đẹp.
Mọi thứ từ tải hình ảnh đến ghép và tạo mã CSS đều được xử lý hoàn toàn bên trong trình duyệt của bạn. Hình ảnh của bạn không bao giờ được tải lên máy chủ, đảm bảo trải nghiệm nhanh chóng và an toàn.
Cách tạo Ảnh động CSS Sprite
Tải lên Hình ảnh
Chọn một sprite sheet đã được ghép hoặc tải lên nhiều hình ảnh khung hình để kết hợp chúng thành một sheet duy nhất.
Điều chỉnh Ảnh động
Trong khi kiểm tra bản xem trước trực tiếp, định cấu hình số cột và hàng, tốc độ phát lại (thời lượng) và hướng phát lại.
Lấy Mã & Hình ảnh
Tải xuống hình ảnh sprite sheet hoàn chỉnh và sao chép mã CSS/HTML đã tạo để tích hợp vào dự án của bạn.
Giải thích Thuộc tính CSS
Cách hoạt động của CSS animation + steps()
Hàm steps() là một giá trị được sử dụng trong thuộc tính animation-timing-function của CSS. Trong khi các ảnh động bình thường (như ease hoặc linear) nội suy giá trị mượt mà theo thời gian, steps() làm thay đổi giá trị theo các bước rời rạc.
Trong ảnh động sprite, thuộc tính này được sử dụng để dịch chuyển ngay lập tức background-position theo chiều rộng của một khung hình duy nhất, tạo ra hiệu ứng chuyển khung hình giống như sách lật.
| Thuộc tính | Mô tả | Vai trò trong Sprites |
|---|---|---|
| animation-timing-function | Đường cong nhịp độ của ảnh động | Việc cài đặt steps(N) ngăn cản sự chuyển tiếp mượt mà giữa các khung hình. |
| background-position | Vị trí bắt đầu của hình nền | Được sửa đổi trong @keyframes để dịch chuyển các khung hình vào khung nhìn. |
| animation-duration | Thời gian để hoàn thành một chu kỳ | Xác định tốc độ phát lại tổng thể (FPS). |
Thuật ngữ Ảnh động
- Sprite Sheet
- Một hình ảnh lớn chứa nhiều hình ảnh nhỏ hơn (khung hình) được sắp xếp trong một lưới. Nó làm giảm số lượng yêu cầu HTTP và cải thiện thời gian tải trang web. Thường được sử dụng phổ biến trong phát triển trò chơi cho ảnh động nhân vật.
- Hàm steps()
- Một hàm làm dịu CSS (easing function) thay đổi các giá trị theo các bước rời rạc thay vì mượt mà. Ví dụ:
steps(4)chia quá trình chuyển đổi thành 4 bước nhảy riêng biệt. Đây là một thành phần quan trọng để tạo ra các ảnh động CSS sprite. - @keyframes
- Một quy tắc CSS dùng để xác định các trạng thái trung gian trong quá trình tạo ảnh động. Trong ảnh động sprite, nó thường chỉ định sự thay đổi trong
background-positiontừ 0% (bắt đầu) đến 100% (kết thúc) theo tổng chiều rộng của hình ảnh. - background-position
- Một thuộc tính CSS chỉ định vị trí ban đầu của hình nền. Bằng cách dịch chuyển giá trị này theo chiều âm, các khung hình khác nhau của sprite sheet sẽ được đưa vào giới hạn hiển thị của phần tử.
- Kênh Alpha (Alpha Channel)
- Phần dữ liệu hình ảnh quy định độ trong suốt. Việc sử dụng định dạng PNG cho phép có các dải màu bán trong suốt đẹp mắt, không giống như GIF chỉ hỗ trợ độ trong suốt 1 bit (hoặc hoàn toàn mờ đục hoặc hoàn toàn trong suốt).
Các câu hỏi thường gặp
- Q.Hình ảnh đã tải lên của tôi có được lưu vào máy chủ không?
- Không. Công cụ này xử lý tất cả hình ảnh—bao gồm tải, hợp nhất và tạo mã—hoàn toàn trong môi trường cục bộ của trình duyệt. Không có dữ liệu nào được gửi đến máy chủ bên ngoài, khiến công cụ an toàn để xử lý hình ảnh tuyệt mật.
- Q.Sự khác biệt giữa ảnh động GIF và CSS sprite là gì?
- Trong khi GIF là các tệp độc lập, đơn giản, chúng bị giới hạn ở 256 màu và không có độ bán trong suốt thích hợp. Các CSS sprite sử dụng ảnh PNG để có hình ảnh chất lượng cao, đồng thời mang lại sự linh hoạt thông qua CSS—cho phép bạn dễ dàng thay đổi tốc độ, đảo ngược hướng phát lại hoặc tạm dừng khi di chuột (hover).
- Q.Tôi có thể ghép các hình ảnh có kích thước khác nhau không?
- Do cơ chế hoạt động của CSS sprite, mỗi khung hình phải có kích thước đồng nhất (chiều rộng và chiều cao). Nếu bạn tải lên các hình ảnh có kích thước khác nhau, công cụ sẽ căn chỉnh chúng dựa trên kích thước của hình ảnh đầu tiên, điều này có thể gây ra hiện tượng cắt cúp hoặc căn chỉnh không như mong muốn. Chúng tôi khuyên bạn nên chuẩn hóa kích thước hình ảnh của mình trước.
- Q.Làm thế nào tôi có thể khắc phục hình ảnh bị mờ trên màn hình Retina hoặc điện thoại thông minh?
- Để đảm bảo hình ảnh sắc nét trên màn hình có độ phân giải cao (như màn hình Retina), hãy tạo sprite sheet của bạn ở mức gấp đôi độ phân giải màn hình dự định. Sau đó, sử dụng thuộc tính
background-sizetrong CSS để thu nhỏ phần tử xuống kích thước hiển thị thực tế. - Q.Có kích thước tối đa nào được đề xuất cho sprite sheet không?
- Nói chung, tốt nhất là nên giữ kích thước tối đa dưới 2048x2048 pixel. Các sprite sheet đặc biệt lớn có thể tiêu thụ đáng kể bộ nhớ trên thiết bị di động, có khả năng gây giật hình hoặc sự cố trình duyệt. Tối ưu hóa xuống còn 1024x1024 pixel hoặc ít hơn thường là mức an toàn.
Ứng dụng
Ảnh động Đang tải (Loading)
Lý tưởng để tạo các thanh trượt tùy chỉnh (spinners) hoặc thanh tiến trình hiển thị trong khi ứng dụng hoặc trang web đang tải. Chúng chạy hiệu quả với chi phí CSS tối thiểu và hỗ trợ các thiết kế bán trong suốt đẹp mắt.
Chuyển động Nhân vật (Giao diện Trò chơi)
Tạo vòng lặp hành động như "đi bộ", "chạy" hoặc "nhảy" cho các nhân vật trong trò chơi trên trình duyệt và các trang web tương tác. Chuyển đổi các hành động dễ dàng chỉ bằng cách thay đổi một class CSS.
Biểu tượng Giao diện Tương tác
Hoàn hảo cho các thay đổi biểu tượng động khi người dùng rê chuột lên nút hoặc nhấp vào hình trái tim "yêu thích". Kích hoạt các hoạt ảnh này một cách trơn tru bằng cách sử dụng :hover hoặc chuyển đổi các class.
Biểu ngữ Quảng cáo (Banner Ads) Chất lượng cao
Hiệu quả cho quảng cáo biểu ngữ yêu cầu chuyển động hấp dẫn mà không bị suy giảm chất lượng thường thấy ở tệp GIF. Kết hợp với việc nén PNG, bạn có thể tạo ra các biểu ngữ hoạt hình sắc nét, bắt mắt.
Gửi phản hồi
Vui lòng cho chúng tôi biết suy nghĩ của bạn để giúp chúng tôi cải thiện công cụ.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.