Bộ Sưu Tập 11 Hiệu Ứng Css3 Đẹp Mắt Cho Website

Thảo luận trong 'Mã Nguồn' bắt đầu bởi Wall-E, Thg 2 15, 2017.

  1. Wall-E

    Wall-E Moderator

    Tham gia ngày:
    Thg 6 26, 2016
    Bài viết:
    2,735
    Xem: 500
    Nếu bạn cảm thấy hay, hãy chia sẻ để ủng hộ tác giả, xin cám ơn
    Với các tính năng hỗ trợ các hiệu ứng chuyển động trong CSS3, giờ đây bạn có thể tự tạo các hiệu ứng chuyển động vô cùng đẹp mắt và chuyên nghiệp mà không cần dùng tới sự trợ giúp của Javascript hay jQuery vì nó là nguyên nhân ảnh hưởng đến tốc độ tải trang.

    Nếu bạn chưa có nhiều kiến thức viết hiệu ứng chuyển động trong CSS3, bạn có thể tham khảo danh sách các bộ thư viện bên dưới. Chỉ cần chèn CSS vào website và thêm class cho đối tượng cần chuyển động là bạn sẽ có ngay một nhiều hiệu ứng tuyệt vời.

    1. Hover.css

    [​IMG]

    Hover.css 5 loại hiệu ứng với 48 kiểu hiệu ứng khác nhau có thể giúp bạn sử dụng tùy ý vào bất cứ mục đích gì. Trong đó nổi bật nhất là có những kiểu hiệu ứng thông dụng và có ích như Speech Bubbles, Shadow and Glow Transitions mà bạn thường thấy trong các giao diện đời mới.

    Link:

    Trang chủ

    Hướng dẫn

    Download


    2. Animatable

    [​IMG]

    Animatable là một tập hợp các hiệu ứng chuyển động dành riêng cho các đối tượng block như bóp méo đối tượng, background động, di chuyển đối tượng khá đẹp mắt và mượt mà.

    Trang chủ & Demo

    Download


    3. Animate.css


    [​IMG]

    Đây có lẽ là thư viện nhiều hiệu ứng nhất trong bài này với 63 hiệu ứng chuyển động khác nhau mà bạn có thể áp dụng với bất kỳ kiểu đối tượng nào.

    Trang chủ & Demo

    Download


    4. fancyInput


    [​IMG]

    Tập hợp 5 hiệu ứng liên quan đến hiển thị chữ khi gõ vào các thẻ <input type=”text”><textarea>. Với hiệu ứng này, nó có thể làm đẹp phần gõ chữ trong website mà đôi khi Javascript muốn làm được điều này phải mất khá nhiều thời gian.

    Demo

    Download


    5. Liffect


    [​IMG]

    Hãy thử tưởng tượng bạn đang có một danh sách các đối tượng và bạn cần nó hiển thị lần lượt nhau với nhiều hiệu ứng khác nhau, và bạn muốn làm việc đó mà không biết làm thế nào? Công cụ tạo hiệu ứng Liffect sẽ giúp bạn ngay thôi.

    Trang chủ & Demo & Download


    6. Morf


    [​IMG]

    Cũng là một thư viện tập hợp các hiệu ứng chuyển động cho đối tượng block nhưng có lẽ nó tập trung nhiều hơn trong việc hoán đổi vị trí đối tượng.

    Trang chủ & Download


    7. Magic


    [​IMG]

    Magic là một bộ thư viện hiệu ứng CSS3 và khi sử dụng kết hợp với jQuery để tạo ra các hiệu ứng chuyển động đẹp mắt. Một điều thú vị là Magic được tạo ra bởi Daniel Eden’s vốn làm việc trên Animate.css.

    Trang chủ

    Download


    8. Effeckt.css


    [​IMG]

    Nếu bạn quá mệt mỏi khi làm các hiệu ứng Modal Box bằng jQuery thì có thể sử dụng Effekt để làm Modal Box hoàn toàn bằng CSS3 với nhiều kiểu cho bạn chọn lựa.

    Trang chủ

    Download


    9. Image Hover Effect


    [​IMG]

    Tổng hợp 6 kiểu hiệu ứng cho hình ảnh khi rê chuột vào rất đẹp mắt, bạn có thể sẽ cảm thấy nó quen thuộc biết chừng nào vì không ít giao diện sử dụng các hiệu ứng này.

    Demo

    Download


    10. CSS Accordion


    [​IMG]

    Tạo accordion đẹp mắt và mượt mà không cần dùng Javascript và JQuery

    Demo

    Download


    11. 16 hiệu ứng đổ bóng bằng CSS3


    [​IMG]

    16 hiệu ứng tạo bóng đổ cho các đối tượng mà bạn có thể sử dụng ngay lập tức, chỉ cần copy và paste.

    Demo & Download

    Ở trên là 11 bộ sưu tập hiệu ứng CSS3 mà mình thu thập được chứ không phải tất cả vì hiện tại có hàng trăm bộ sưu tập khác nhau nhưng việc thu thập lại cũng khá công phu. Do đó, nếu bạn thấy bộ sưu tập nào khác hay hơn nữa thì có thể giúp mình bổ sung phía dưới nhé.
     
    PS: Ủng hộ diễn đàn bằng cách click quảng cáo hoặc đăng ký mua bitcoin - xin cảm ơn!
    Chỉnh sửa cuối: Thg 8 3, 2017
  2. Đang tải...
Trả lời qua Facebook

Chia sẻ trang này