1. Hoạt hình xem CSS thuần túy
Hoạt hình xem CSS thuần túy của Grzegorz Witczak [@Wujek_Greg]
Đây là một ví dụ đáng yêu về việc kết hợp chuyển đổi CSS [xoay và dịch] để định vị kim và chỉ báo ngày/đêm trên mặt đồng hồ thời trang
2. CSS Submarine
Hoạt ảnh tàu ngầm với CSS trong CodePen của Alberto Jerez [@ajerez]
Việc sử dụng tuyệt đẹp thùng chứa hình lỗ cảng tròn mang lại cho chiếc tàu ngầm hoạt hình CSS này rất nhiều sức hấp dẫn
3. ASCII AT-AT
AT-AT của Tim Pietrusky [@TimPietrusky]
Tàu sân bay nhân sự AT-AT lấy cảm hứng từ Chiến tranh giữa các vì sao, được vẽ bằng văn bản với màu sắc được luân chuyển trong CSS. Đó là một CSS hoạt hình hình ảnh thú vị được tìm thấy trên CodePen
4. Trình tải SVG/CSS
Trình tải SVG/CSS của Bidji [@Bidji]
Trình tải này sử dụng màu sắc thay đổi để tạo ấn tượng xoay. Đó là một hình ảnh động đơn giản nhưng thú vị trong CSS được tìm thấy trên CodePen
5. Gói CSS 3D
CSS 3D Tardis của Gerwin van Royen [@Gerwinnz]
CSS có thể được sử dụng để tạo một số hiệu ứng 3D tuyệt vời. Đây là hoạt hình tardis 3D được tìm thấy trên CodePen
6. Con chim ngủ gật
Con chim ngủ gật của Peter Klein [@pmk]
Phong cách nghệ thuật đơn giản và số lượng hoạt hình vừa phải mang đến cho chú chim buồn ngủ này ảo giác về cuộc sống
7. Hoạt hình đường viền CSS thuần túy
Hoạt ảnh đường viền CSS thuần túy không có SVG của Rplus [@rplus]
Sử dụng đơn giản nhưng rất hiệu quả các đường viền CSS để tạo hoạt ảnh kiểu tải
8. Chiến tranh giữa các vì sao. Sức mạnh thức tỉnh
Chiến tranh giữa các vì sao. Thần lực thức tỉnh trong CSS của Donovan Hutchinson [@donovanh]
Bộ ba phim mới nhất từ loạt phim Chiến tranh giữa các vì sao có những lời gièm pha. Nhưng hoạt hình này sử dụng CSS, HTML và một chút JavaScript sẽ không có gì ngoài người hâm mộ
9. Tổng hợp 3D
Pure CSS 3D Synthesizer [di chuột xuống để xoay] của Nikolay Talanov [@suez]
Hãy dùng thử các phím và xoay hoạt ảnh tổng hợp 3D này được tạo bằng CSS và được chia sẻ trên CodePen. Công việc tuyệt vời
10. Hệ mặt trời xếp tầng
Hệ mặt trời xếp 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 theo tỷ lệ, các mặt trăng và chi tiết về từng hành tinh lớn hơn. Mặt trời thậm chí còn được chụp trực tiếp từ thực tế
11. CSS Hệ mặt trời 3D
Hệ mặt trời CSS 3D đầy đủ của Julian Garnier [@juliangarnier]
Một hình ảnh động khác về hệ mặt trời trên CodePen, nhưng lần này là ở dạng 3D. Sử dụng đẹp của bóng
12. Máy ảnh thiết kế phẳng
Máy ảnh thiết kế phẳng với hoạt ảnh CSS trên CodePen của Damien Pereira Morberto [@damienpm]
Nhấn nút chụp trên máy ảnh phẳng này để xem nó tạo ảnh bằng hoạt ảnh CSS
13. Chuyển đổi ngày và đêm
Mô phỏng Ngày Đêm của Szymon Stypa [@Catagen]
Nhấn nút để xem ngày chuyển thành đêm
14. Sprite hoạt hình bằng CSS
Hoạt ảnh sprite bằng CSS của Avaz Bokiev [@samarkandiy]
Trình diễn cách sử dụng một chuỗi hình ảnh [sprite] để tạo hoạt ảnh chuyển động dừng, hoàn chỉnh với chuyển động tiến và lùi. Bỏ chọn hộp kiểm và sử dụng các nút mũi tên để xem từng khung di chuyển
15. Khối mười hai mặt
Hoạt hình hình ảnh khối mười hai mặt trong CSS của wontem [@wontem]
Trên CodePen, hãy tìm khối mười hai mặt đẹp, tinh tế này được tạo và hoạt ảnh hoàn toàn bằng CSS
Ảnh động CSS trên Envato Market
Bạn sẽ tìm thấy rất nhiều hoạt ảnh tuyệt vời trên CodePen. Hoạt hình CSS cũng là một danh mục đang phát triển trên Envato Market. Nếu bạn muốn sử dụng các hiệu ứng hoạt hình trong các dự án của mình, bạn có thể tìm thấy mọi thứ từ bóng tối đến hiệu ứng di chuột trên hình ảnh, hộp đèn, v.v.
Sự kết luận
Cách đây không lâu, chúng tôi đã dựa vào các công cụ Flash hoặc JavaScript cho bất kỳ hoạt ảnh 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 3D và hoạt ảnh được tăng tốc 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. Một số bản trình diễn hoạt hình truyền cảm hứng nhất mà bạn đã xem gần đây là gì?
- 10 ví dụ về hoạt ảnh trên CodePen mà bạn có thể học hỏi
CodePen là một nơi tuyệt vời để tìm cảm hứng và xem thử nghiệm giao diện người dùng điên rồ nào mà những người khác đang nghĩ ra. Ngoài ra, đây cũng là một nơi hữu ích để tìm
Donovan Hutchinson27 tháng 2 năm 2017
hoạt hình
Học CSS. Hướng dẫn hoàn chỉnh
Các hoạt ảnh CSS CodePen này có khiến bạn quan tâm đến việc tự làm một cái không?