7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. CSS Animation

15 Mẫu Hiệu ứng động bằng CSS trên CodePen

Read Time: 3 mins

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?

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.