Khái quát
Chắc hẳn khi làm lập trình web các bạn đã thấy rất nhiều hiệu ứng chuyển động phức tạp đặt biệt trên nhân vật như các hoạt động di chuyển cầm nắm của nhân vật model. Nhưng liệu các bạn có biết rằng chúng ta hoàn toàn có thể tạo ra chức năng này chỉ đơn giản với CSS.
Ở ví dụ này mình sẽ tạo ra hiệu ứng người di chuyển ( Walking Cycle ) đi lại chỉ với CSS nhé.
Walk Cycle là gì ?
Walk cycle là một thuật ngữ dung để mô tã 1 chu kỳ đi bộ.
Nó bao gồm rất nhiều khung hình dung để mình họa cho 1 chu kỳ.
Các chu kỳ đi bộ có thể được chia thành bốn khung chính:
- điểm tiếp xúc phía trước.
- Tư thế chuyền đầu tiên.
- Điểm tiếp xúc phía sau.
- Tư thế chuyền thứ hai.
Bên cạnh chuyển động rõ ràng của chân, cần có nhiều chi tiết khác để có một chu trình đi bộ thuyết phục, chẳng hạn như thời gian hoạt hình, chuyển động của cánh tay, đầu và lực xoắn của toàn bộ cơ thể.
Xem video hướng dẩn chi tiết
Download Full Code
Nguồn tài liệu
Tài liệu về walk cycle: wikipedia.org