10 ví dụ về animation thú vị trên Codepen (phần 2)

Hiện nay, các trình duyệt trên mobile đã mạnh mẽ và tuyệt vời hơn rất nhiều khi có những hình ảnh vô cùng sống động. Với việc sử dụng CSS3, chúng ta có thể tạo ra những tác phẩm, những chuyển động vô cùng thú vị mà không cần bất kỳ hình ảnh nào. Rõ ràng, điều đó đã hỗ trợ rất nhiều trong việc load site và để lại ấn tượng rất lớn với người sử dụng.

Tiếp theo phần trước của bài viết, các bạn có thể xem phần 1 của bài viết ở đây: https://viblo.asia/p/10-vi-du-ve-animation-thu-vi-tren-codepen-phan-1-Az45bxnoZxY Trong bài này, tôi xin giới thiệu tiếp 5 ví dụ về animation mà tôi đã sưu tầm được trên codepen. Như các bạn đã biết, 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. Vì thế, để tìm kiếm những animation mà bạn thấy thú vị thì codepen là 1 lựa chọn khá hữu ích cho bạn.

6. Sleeping Cat

Kết hợp rất nhiều các phần tử HTML đơn giản với một loạt các animation vui nhộn, tinh tế, con mèo đang ngủ này thể hiện được nhiều tính cách. Trong ví dụ này sử dụng Sass và các biến để điểu khiển các animation của chú mèo. Hãy thử thay đổi một số phần tử để xem điều gì sẽ xảy ra!

7. Black Bear

Các animation mượt mà có thể đạt được mà chỉ cần sử dụng HTML và CSS, đặc biệt khi chúng ta tuân theo một số nguyên tắc cơ bản. Animation này sẽ giữ số phần tử ở mức tối thiểu và sử dụng tối đa các hiệu ứng chuyển đổi.

8. CSS Sponge

Các animation nhanh có thể thêm được nhiều tính cách, trạng thái khi kết hợp. Trong ví dụ này hãy xem cách mà các bubble và splash được dàn dựng với nhau để tạo ra các animation dễ thương với miếng bọt biển hạnh phúc, mà tất cả đều không có bất kỳ hình ảnh nào ở đây.

9. Pure CSS Checkbox Mail

1 loạt các keyframe animation có thể kể một câu chuyện hoặc giúp mọi người hiểu những gì họ đang xem. Ở đây chúng ta thấy mở một phong bì và nhận được một lá thư. Hãy click vào lá thư để xem điều gì sẽ xảy ra.

10. Care Preloader

Một chút chuyển động tinh tế có thể tạo ra cảm giác mạnh mẽ về cường độ! Trình tải này có một chiếc xe trông giống như nó đang tăng tốc, tất cả được tạo bằng một vài phần tử và hiệu ứng CSS. Không có hình ảnh nào được sử dụng sẽ tải nhanh hơn.

Hy vọng qua 10 ví dụ thú vị về Animation trên codepen sẽ giúp các bạn hiểu thêm được nhiều hơn về CSS và các khả năng mà CSS có thể làm được. Ngôn ngữ có thể có giới hạn nhưng sự sáng tạo của con người là vô hạn và có thể tạo nên những điều đặc biệt và thú vị.