Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)
CodePen đang nhanh chóng trở thành nơi thường được tìm đến để thể hiện những gì chúng ta có thể làm với các ý tưởng sáng tạo web của chúng ta. Dưới đây là danh sách một số nội dung tuyệt vời mà mọi người đã tạo ra gần đây bằng hiệu ứng động CSS!
1. JavaScript Mickey Watch
Apple Watch giống như Mickey Watch bởi Jay Salvat (@jaysalvat).
Đây là một ví dụ đáng yêu về việc kết hợp CSS Transition, đồ hoạ SVG và JavaScript để đặt cánh tay lên trên khuôn mặt Mickey Mouse dễ thương.
2. Tàu ngầm CSS
Tàu ngầm với CSS bởi Alberto Jerez (@ajerez).
Cách sử dụng container hình tròn làm cho tàu ngầm với hiệu ứng động CSS này trở nên rất hấp dẫn.
3. ASCII AT-AT
AT-AT bởi Tim Pietrusky (@TimPietrusky).
Star Wars đã truyền cảm hứng cho nhân viên AT-AT, vẽ bằng cách sử dụng văn bản với màu sắc được tô điểm bằng CSS. Một hiệu ứng vô cùng ấn tượng.
4. SVG/CSS Loader
SVG/CSS Loader bởi Bidji (@Bidji).
Loader này sử dụng việc thay đổi màu sắc để tạo hiệu ứng xoay ấn tượng.
5. Trụ 3D bằng CSS
Trụ 3D CSS bởi Gerwin van Royen (@Gerwinnz).
CSS có thể được sử dụng để tạo ra một số hiệu ứng 3D tuyệt vời. Dưới đây là một trụ 3D:
6. Con chim Ngủ gật
Con chim Ngủ gật bởi Peter Klein (@pmk).
Phong cách nghệ thuật đơn giản và chỉ cần một số hiệu ứng động thích hợp tạo cho con chim đang ngủ gật này một cuộc sống tưởng tượng.
7. Border Động chỉ bằng CSS
Border Động bằng CSS mà không cần SVG bởi Rplus (@rplus).
Đơn giản nhưng rất hiệu quả, việc sử dụng border trong CSS để tạo ra một hiệu ứng động theo phong cách loader.
8. Star Wars: The Force Awakens
Star Wars: The Force Awakens bằng CSS bởi Donovan Hutchinson (@donovanh).
Tiêu đề từ bộ phim Star Wars sắp tới được tạo bằng CSS, HTML và một ít JavaScript.
9. 3D Synth
3D Synthesizer thuần CSS (giữ chuột để xoay) bở Nikolay Talanov (@suez).
Hãy thử các phím và xoay 3D Synth được tạo ra bằng CSS này. Thật tuyệt vời:
10. Hệ Mặt trời Phân tầng
Hệ Mặt trời Phân tầng! bởi Tady Walsh (@tadywankenobi).
Một mô hình hệ mặt trời của chúng ta, hoàn chỉnh với tốc độ quay vòng, mặt trăng và các chi tiết trên mỗi hành tinh lớn hơn. Mặt trời thậm chí là một mô phỏng từ mặt trời thật!
11. Hệ Mặt trời 3D
Hệ mặt trời 3D Đầy đủ bằng CSS bởi Wayne Dunkley (@waynedunkley).
Một hệ mặt trời khác, nhưng lần này ở dạng 3D. Sử dụng hiệu ứng bóng tối rất đẹp.
12. Camera Thiết kế Phẳng
Camera Thiết kế Phẳng với Hiệu ứng động CSS bởi Damien Pereira Morberto (@damienpm).
Nhấn nút chụp trên máy ảnh phẳng này để xem nó tạo ra một bức ảnh bằng cách sử dụng hiệu ứng động CSS.
13. Ngày sang Đêm
Mô phỏng Ngày và Đêm bởi Szymon Stypa (@Catagen).
Nhấn nút để xem từ ngày chuyển sang đêm và ngược lại.
14. Hình sprit Động bằng CSS
Hình sprit Động bằng CSS bởi Avaz Bokiev (@samarkandiy).
Một minh hoạ về cách một loạt hình ảnh (sprite) có thể được sử dụng để tạo ra hiệu ứng stop-motion, hoàn chỉnh với chuyển động về phía trước và ngược lại.
15. Hình khối
Hình khối bởi wontem (@wontem).
Một hình khối đẹp, tinh tế, được tạo ra và chuyển động hoàn toàn bằng CSS.
Phần tóm tắt
Cách đây không lâu, chúng ta đã dựa vào các công cụ như Flash hoặc JavaScript cho bất kỳ hiệu ứng động nào trong trình duyệt. Các trình duyệt hiện đại đã hỗ trợ tốt hơn cho CSS, với việc tăng tốc 3D và hiệu ứng động bằng phần cứng.
Nhờ các trang web như CodePen, chúng ta có thể chia sẻ và học hỏi dễ dàng hơn bao giờ hết. Hiệu ứng động nào làm bạn thấy thích thú nhất?
By
