Trong bài đăng này, hãy tìm hiểu cách tạo một số ảnh động phổ biến trên CodePen. Tất cả các ảnh động này đều sử dụng các kỹ thuật hiệu suất cao được thảo luận trong các bài viết khác trong phần này.
Hãy xem bài viết Tại sao một số ảnh động lại chậm? để tìm hiểu lý thuyết đằng sau những đề xuất này và Hướng dẫn về ảnh động để biết các mẹo thiết thực.
Ảnh động về trạng thái đang tải của trình hướng dẫn
Xem ảnh động tải Trình hướng dẫn trên CodePen
Ảnh động tải này được tạo hoàn toàn bằng CSS. Hình ảnh và tất cả ảnh động đều được tạo bằng CSS và HTML, không có hình ảnh hoặc JavaScript. Để hiểu cách tạo và hiệu suất của trang này, bạn có thể sử dụng Công cụ của Chrome cho nhà phát triển.
Kiểm tra ảnh động bằng Công cụ của Chrome cho nhà phát triển
Khi ảnh động đang chạy, hãy mở thẻ Hiệu suất trong Công cụ cho nhà phát triển của Chrome rồi ghi lại ảnh động trong vài giây. Trong phần Tóm tắt, bạn sẽ thấy rằng trình duyệt không thực hiện bất kỳ thao tác Bố cục hoặc Hiển thị nào khi chạy ảnh động này.