Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. CSS Animation
Code

20 Hoạt hình CSS tốt nhất trên CodeCanyon

by
Length:LongLanguages:

Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)

Đã có lúc trong lịch sử của Internet khi bạn phải dùng Flash nếu bạn muốn bổ sung vài hiệu ứng thị giác cho website của bạn ngoài chọn lựa hình GIF động. Cho đến ngày hôm nay, và chúng ta thấy Flash bị khai tử và những điều như CSS3 và HTML5 mang đến hình ảnh động và hiệu ứng tuyệt vời cho web.

Nếu bạn muốn bổ sung vài hoạt hình CSS tuyệt vời cho website của bạn hoặc cho dự án web tiếp theo, đây là danh sách của 20 hoạt hình CSS tốt nhất trên CodeCanyon giúp bạn bắt đầu:

1. Aero - CSS3 Hover Effects

Bổ sung vào hiệu ứng hover hình ảnh kính mờ lửng lơ với Aero - CSS3 Hover Effects.

Aero - CSS3 Hover Effects

Nó hoàn toàn thích ứng và dễ sử dụng, bạn cũng sẽ tìm thấy:

  • dễ dàng đổi màu và chuyển từ hình tròn thành hình vuông
  • tương thích với tất cả trình duyệt - thậm chí là Microsoft Edge
  • tương thích với SASS
  • CzS có thể chỉnh sửa
  • và nhiều nữa!

Với 10 hiệu ứng sẵn có và nhiều hiệu ứng sắp phát hành, Aero - CSS3 Hover Effect là một bộ hoạt hình CSS đẹp dành cho hiệu ứng hover hình ảnh của bạn.

2. MegaHover Mouse Over Effects

MegaHover Mouse Over Effects đề xuất một tập hợp hiệu ứng hover hình ảnh mạnh mẽ tương thích với Bootstrap 3.

MegaHover Mouse Over Effects

Nó cũng có:

  • sử dụng biểu tượng Font Awesome
  • tương thích đa trình duyệt
  • thích ứng toàn diện
  • và nhiều nữa

Dễ tích hợp và thay đổi MegaHover Mouse Over Effect thành hàng trăm dạng hiệu ứng hover đẹp.

3. Animatia - CSS Image Hover Effects

Dễ dàng sử dụng, thời gian load tối thiểu, có khả năng tuỳ biến cao? Animatia - CSS Image Hover Effects đáp ứng được và thậm chí nhiều hơn.

Animatia - CSS Image Hover Effects

Bộ CSS này gồm:

  • hơn 115 hiệu ứng hover có khả năng tuỳ biến cao
  • hoàn toàn responsive và các file dễ sử dụng
  • CSS3 thuần và các biểu tượng từ Font Awesome
  • và nhiều nữa

Sử dụng Animatia - CSS Image Hover Effects để tạo style cho button, hiệu ứng overlay, các chú thích, và những hoạt hình CSS khác.

4. Hover Effects Framework

Hover Effects Framework là một giải pháp hoạt hình CSS bóng bẩy.

Hover Effects Framework

Code gọn gàng, hoàn toàn responsive, và:

  • dùng font IcoMoon Ultimate
  • 4 hình dạng và 5 màu sắc
  • 50+ hoạt hình
  • và nhiều nữa

Hover Effects Framework có code gọn, và trên tất cả nó gồm có rất nhiều ví dụ để bạn bắt đầu với vài hoạt hình CSS đẹp mắt.

5. Collection of Preloaders

Có lẽ bạn không bao giờ cần có một preloader nào nữa sau khi bạn đã dùng Collection of Preloaders.

Collection of Preloaders

Bạn sẽ có:

  • tài liệu rõ ràng sử dụng trong khi chỉnh sửa dễ dàng
  • một bộ hoạt hình CSS3 gọn nhẹ và linh hoạt
  • 27 preloader độc đáo

Thân thiện với thiết bị di động, Collection of Preloader là một bổ sung tuyệt vời cho bộ công cụ CSS của bất kỳ ai.

6. CSS3 Image Hover Effects

Nếu bạn từng thấy một hoạt hình CSS cho hiệu ứng hover của hình ảnh, thì có phải bạn đã thấy toàn bộ không?

Không hẳn.

CSS3 Image Hover Effects gồm nhiều hiệu ứng đẹp và độc đáo.

CSS3 Image Hover Effects

Gồm có:

  • 22 hiệu ứng CSS hover cho hình ảnh
  • hoàn toàn responsive và tuyệt vời
  • Code CSS3 gọn
  • và nhiều nữa

Hãy thử qua CSS3 Image Hover Effects tương thích với Bootstrap 3.

7. Image Hover CSS Library

Thư viện Image Hover CSS là một thư viện hoạt hình CSS hover cho hình ảnh: nhỏ gọn và có thể mở rộng.

Image Hover CSS LIbrary

Đây là một bộ sưu tập gồm 58 lớp hiệu ứng hover, được giảm kích thước xuống chỉ còn 25KB.

  • hoạt động với bất kỳ nội dung nào cần hover
  • hiệu ứng hover độc đáo
  • dễ sử dụng
  • và nhiều nữa

Rất khó phân biệt giữa các hoạt hình CSS hover cho hình ảnh, nhưng thư viện Image Hover CSS thì có thể.

8. SVG Logo Scroll Animation | CSS3 and Javascript

Thật tốt khi thoát khỏi những hiệu ứng hover hình ảnh và hoạt hình CSS thông thường - và xem qua SVG Logo Scroll Animation | CSS3 và JavaScript.

SVG Logo Scroll Animation CSS3 and Javascript

Chỉ với dưới 4k, bạn có vài hoạt hình SVG cuộn trang đẹp tuyệt.

Hãy tạo ra vài hoạt hình trang web đẹp với SVG Logo Scroll Animation | CSS3 và JavaScript.

9. Viavi CSS3 Scroll Effects

Viavi CSS3 Scroll Effects thực sự là một giải pháp hoạt hình CSS3 đẹp cho cuộn trang HTML.

Viavi CSS3 Scroll Effects

Một số tính năng gồm có:

  • 16 hiệu ứng cuộn CSS3
  • dễ dàng triển khai
  • hoàn toàn responsive
  • và nhiều nữa

Sử dụng một hệ thống grid (lưới) và cho phép chạm sử dụng cho di động, Viva CSS3 Scroll Effects không chỉ đẹp mà còn được triển khai tốt.

10. CSS3 Spinners & Loaders

Cần loader mà không phài hình gif?

Không vấn đề CSS3 Spinner & Loader đáp ứng cho bạn.

CSS3 Spinners Loaders
  • hơn 25 biến thể
  • dễ dàng thay đổi
  • dể mở rộng

CSS3 Spinners & Loaders có tài liệu đầy đủ và giải pháp CSS toàn diện cho spinner và loader.

11. Midix - CSS3 Animation Effects without jQuery

Sử dụng CSS3 thuần, Midix - CSS3 Animation Effects không dùng jQuery và cung cấp một bộ CSS với 16 hoạt hình.

Midix - CSS3 Animation Effects without jQuery

Bạn có thể điều chỉnh:

  • tốc độ diễn hoạt
  • độ trể khi diễn hoạt
  • màu sắc cho biểu tượng

Bạn không chỉ có được một bộ hoạt hình CSS tuyệt vời với Midix - CSS3 Animation Effects mà không cần jQuery, mà còn có hỗ trợ thân thiện và miễn phí cập nhật.

12. CSS3 Hover Effects

CSS3 Hover Effect là một lựa chọn tốt khác:

CSS3 Hover Effects

Bạn dễ dàng thay đổi:

  • màu sắc
  • kích thước viền
  • hình tròn sang hình vuông
  • khoảng cách giữa các đoạn văn bản

Với 479 icon hỗ trợ retina và 20 hiệu ứng khác nhau, CSS3 Hover Effects là một tài nguyên tốt để sử dụng.

13. VSPreloader - Ultimate CSS Animated Preloaders

VSPreloader - Ultimate CSS Animated Preloaders là một trong những giải pháp độc đáo hơn, sáng tạo hơn và đẹp mắt bạn đang muốn tìm.

VSPreloader - Ultimate CSS Animated Preloaders

Các tính năng nổi bật:

  • 60 trình hỗ trợ
  • 40 quà tặng
  • 30 hoạt hình
  • màu sắc không giới hạn

Nó cũng cực kỳ sắc nét và độc đáo.

Hãy quan sát kỹ hơn về VSPreloader - Ultimate CSS Animated Preloaders. Tôi nghĩ bạn sẽ rất ấn tượng.

14. Heed - Pure CSS3 Animation Effects

Heed - Pure CSS3 Animation Effects cung cấp mọi thứ mà bạn muốn có trong một bộ sưu tập hoạt hình CSS.

Heed - Pure CSS3 Animation Effects

Dễ dàng cài đặt, chỉnh sửa và cấu hình với SCSS (file đính kèm).

  • 20 chọn lựa màu sắc thiết kế
  • Các biểu tượng Font Awesome
  • 15 hiệu ứng
  • và nhiều nữa

Heed - Pure CSS3 Animation Effects hỗ trợ retina, và có những bản cập nhât miễn phí.

15. Ayan - CSS3 Link Hover Effects

Trong khi đa số các hoạt hình CSS mà bạn tìm thấy tập trung vào hình ảnh và hiệu ứng trang, Ayan - CSS3 Link Hover Effects mang đến các hiệu ứng hover ấn tượng cho link kết.

Ayan - CSS3 Link Hover Effects

Bạn sẽ tìm thấy 30 hiệu ứng hover tuyệt đep cho liên kết và:

  • độ tương thích ổn định với trình duyệt
  • tài liệu hướng dẫn
  • các hoạt hình hiện đại
  • và nhiều nữa

Ayan - CSS3 Link Hover Effects đầy sáng tạo, sắc nét và bổ sung hoạt cảnh CSS đẹp mà không quá bóng bẩy.

16. Sinister - Pure CSS Image Hover Effects

Kiêu hãnh với hơn 100 hiệu ứng hover, Sinister - Pure CSS Image Hover Effects mang lại một lượng hiệu ứng được thiết kế tốt và ấn tượng.

Sinister - Pure CSS Image Hover Effects

Nó gồm có:

  • 22 hiệu ứng chuyển tiếp nội dung
  • 18 hiệu ứng chuyển tiếp overlay
  • 23 hiệu ứng chuyển tiếp cho button
  • 100 hiệu ứng hover

Không cần đến JavaScript và jQuery, sử dụng CSS thuần, Sinister - Pure CSS Image Hover Effects mang đến:

  • zoom-in và zoom-out
  • rotate X và rotate Y
  • rotate trái và phải
  • rotate và scale
  • chuyển đổi cubic
  • layer hover
  • và nhiều nữa

17. Stylish Social Media Animated Icons Style

Bổ sung hoạt hình CSS đẹp vào các biểu tượng mạng xã hội của bạn với Stylish Social Media Animated Icons Style.

Stylish Social Media Animated Icons Style

Với thiết kệ gọn và 9 style khác nhau để chọn lựa, bạn cũng sẽ tận hưởng được:

  • dễ triển khai và tuỳ biến
  • tài liệu và code vững chắc
  • không phụ thuộc vào hình ảnh và biểu tượng
  • tương thích đa trình duyệt
  • và nhiều nữa

Stylish Social Media Animated Icons Style bổ sung một số mau sắc và hoạt hình CSS vào biểu tượng mạng xã hội của bạn.

18. CSS3 Animations

Dễ dàng tạo hoat hình cho div, p, và body của HTML với CSS3 Animations.

CSS3 Animations

Đây là một phần code hay có thể dùng và áp dung trong nhiều tình huống thiết kế khác nhau.

Tính năng nổi bật:

  • dễ dàng sử dụng và tuỳ biến
  • CSS3 và không JavaScript
  • 10+ hoạt hình

Bạn sẽ bổ sung CSS3 Animations vào bộ công cụ thiết kế của mình chứ?

19. Pure CSS3 Image Accordion

Xây dựng thiết lập slider của riêng bạn hoặc sử dụng Pure CSS3 Image Accordion cho hoạt hình CSS đẹp mắt.

Pure CSS3 Image Accordion

Đó là:

  • hoàn toàn responsive
  • không có chiều rộng cố định
  • 4 chọn lựa chú thích
  • dễ tuỳ biến

Hãy tạo vài bài nhạc với Pure CSS3 Image Accordion.

20. CSS3 Mega Tooltip Animation Pack

Quá chán với những tooltip đơn giản?

Hãy bổ sung vài ảo thuật hoạt hình CSS bằng CSS3 Mega Tooltip Animation Pack.

CSS3 Mega Tooltip Animation Pack

Tooltip hoạt hình CSS này gồm có:

  • 10 hiệu ứng hoạt hình
  • 8 thư viện màu
  • tài liệu
  • và nhiều nữa

CSS3 Mega Tooltip Animation Pack cũng có một dự phòng cho Internet Explorer.

Tổng kết

Thậm chí với nhiều hoạt hình CSS khác nhau sẵn có trên Envato Market, có lẽ bạn vẫn chưa tìm được điều bạn cần.

Không vấn đề. Bạn có thể xây dựng cho riêng mình.

Hãy xem qua eBooks như Mastering CSS3, tham gia một trong các khoá học code khác nhau, hoặc tìm và làm theo một hướng dẫn CSS3 code.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.