Biểu tượng hoạt hình CSS codepen
|
CodePen chắc chắn là nơi thích hợp để thể hiện những gì chúng tôi có thể làm với các sáng tạo web của mình. Dưới đây là danh sách một số nội dung tuyệt vời mà mọi người đã tạo bằng hoạt ảnh CSS
1. Hoạt hình xem CSS thuần túyHoạt hình xem CSS thuần túy của Grzegorz Witczak (@Wujek_Greg) Show
Đâ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 SubmarineHoạ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-ATAT-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/CSSTrì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 3DCSS 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ậtCon 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úyHoạ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ỉnhChiế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 3DPure 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ầngHệ 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 3DHệ 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ẳngMá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à đêmMô 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 CSSHoạ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ặtHoạ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 MarketBạ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ậnCá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ì?
Học CSS. Hướng dẫn hoàn chỉnhCá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? |
