30 Ảnh động CSS thú vị mà bạn phải xem

Trước đây chúng tôi đã xuất bản các hiệu ứng văn bản sáng tạo mà bạn có thể thực hiện bằng CSS và nhiều điều thú vị khác mà bạn không nghĩ là có thể thực hiện với CSS. Tuy nhiên, phần tổng hợp này tập trung vào nhiều thứ bạn có thể tạo hiệu ứng bằng CSS và nhiều trong số các sáng tạo này sẽ khiến bạn phải nhướn mày hoặc hai.

Từ tải hình ảnh động đến toggles và cửa sổ phương thức đến các yếu tố rung lắc, đống này 30 cách sử dụng hoạt hình CSS khác thường và sáng tạo có thể mở mang đầu óc cho nhiều cách bạn có thể chơi với hoạt hình CSS mà trước đây bạn có thể chưa bao giờ nghĩ tới.

CSS tải hình ảnh động bởi patrikhjelm

Bảy chấm hoạt hình dịch chuyển sang trái và phải để biểu thị một hành động tải.

Biểu tượng giỏ hàng hoạt hình của jonitrythall

Hiệu ứng hoạt hình dễ thương cho khi cửa hàng tạp hóa được thêm vào giỏ hàng. Cuộn xuống để biết thêm.

Hamburger CSS3 chỉ hoạt hình bởi Dawid Krajewski

Được xây dựng với CSS thuần túy, không có JS hoặc bất cứ thứ gì khác.

404 nhân vật hoạt hình của An Es

Ít nhất với trang lỗi này, một nhà phát triển đang làm việc trên nó. Ngay cả khi đó là 404.

CSS Mars hạ cánh bằng mgitch

Chúng ta đã đáp xuống Sao Hỏa! Được làm bằng CSS.

The Avenger By mariomaselli

Bạn có thể nghe thấy cơn giận của hulk rung chuyển qua màn hình không? Tuyệt, đúng rồi?

Chuyển đổi ngày / đêm bởi jsndks

Bây giờ, bạn có thể chuyển đổi ngày và đêm với CSS. Ý tưởng thiên tài!

Ứng dụng Google Now của bên thứ 3 bằng codecalm

Ứng dụng bên thứ ba của Google Hiện hành, hoạt hình.

Clo clo By Judag

Một con gà trống di chuyển như vậy? Bạn đặt cược nó làm, hoàn thành với cổ vui nhộn. Thực hành CSS3 tuyệt vời.

Biểu tượng menu hoạt hình của mariusbalaj

Một ý tưởng đơn giản đưa ra hành động; xem nút menu cụ thể hóa khi bạn cuộn xuống.

Một trình tải trước CSS khác của Maseone

Một hoạt hình tải nhịp điệu CSS tuyệt vời. Thôi miên, không phải nó?

Nút gửi bởi auginator

Nhấp để gửi và nút hoạt hình quá trình tải cho đến khi quá trình gửi hoàn tất!

Thiết kế vật liệu thanh bên đàn hồi SVG bởi suez

Kéo thanh màu trắng sang phải để xem hiệu ứng thanh bên đàn hồi.

Nút hạt của igcorreia

Làm những gì nút nói: di chuột cho sự tuyệt vời.

Nút Gooey của Lucas Bebber

Nhấn vào đây để tạo hiệu ứng Gooey. Bạn sẽ nhận được nó khi bạn nhìn thấy nó và bạn sẽ nhấp vào nó nhiều lần nữa. Amirite?

Nút flipside bởi hakimel

Nhấp vào bất kỳ phía nào của nút Xóa và nút sẽ lật theo nơi bạn nhấp.

Thực đơn hamburger! Bởi CharlesSmart

Một thực đơn hamburger thực sự ngon. Nhấp vào hamburger cho các hiệu ứng

Tàu tuần dương của yy

Xem xe máy đi.

Sóng hình khối 3D bởi waddington

Các khối lập phương 3D thần thánh!

Chữ ký hoạt hình của Drygiel

Đây là một chữ ký không thực sự là hoạt hình GIF, mà thay vào đó là một chuỗi PNG hoạt hình bằng CSS3.

Hoạt hình gradient nền của quasimondo

Thủ thuật này thay đổi độ dốc nền từ màu này sang màu khác ở dạng mịn, liên tục.

Biểu tượng chuyển đổi chiến tranh giữa các vì sao

Một menu hamburger được chuyển thành lightabers trong trận chiến (thập tự giá).

Phong cách GIF hoạt hình của jascha

Xem như một bức ảnh cụ thể hóa từ giữa nghệ thuật pixel.

Tập trung vào / ra hoạt hình đầu vào bằng thông lượng

Một cây bút hoạt hình nhỏ hoạt hình viết trên đỉnh của cái mà bạn đang điền vào.

Tam giác màu sắcBy felipedefarias

Một ảo ảnh quang học tuyệt vời, vâng, được thực hiện với CSS3.

Máy pha cà phê của thisisroger

Đây là một lời nhắc nhở để uống cà phê liều hàng ngày của bạn. Giống như bạn cần một.

Khủng long Chrome bằng nickspiel

Không thể truy cập trang bạn muốn beacuse của một kết nối bị mất? Đây là con khủng long mà bạn luôn thấy khi điều đó xảy ra, chỉ có điều lần này nó đang chạy từ một thiên thạch!

CSS lắc bởi elrumordelaluz

Di chuột qua từng hiệu ứng để xem anh chàng lắc nhẹ.

Newton Cradle Loader bởi tất cả mọi thứ Smitty

Nếu bạn biết vật lý, bạn chắc chắn biết cái nôi của Newton, nhưng có lẽ không thích cái này.

Khởi chạy Modal By koolhaus

Nhấn vào đây để xem hoạt hình cửa sổ phương thức đẹp và mịn.

Robot đi bộ bằng P233

Robot này chỉ tiếp tục đi, và đi, và đi, xung quanh trục Y.

Mũi tên uốn cong uốn cong bởi Hakim

Từ trang đầu tiên đến trang cuối cùng, hoạt hình phân trang này hiển thị rõ ràng như thế nào nếu bạn đang đi xa, theo trang.

Đọc ngay: 15 Hiệu ứng văn bản đẹp mắt được tạo bằng CSS