Trang chủ » Bộ công cụ » Wicky CSS - Thư viện hoạt hình mới hấp dẫn trong CSS3 thuần túy

    Wicky CSS - Thư viện hoạt hình mới hấp dẫn trong CSS3 thuần túy

    Nhờ CSS3, bạn có thể xây dựng một số hình ảnh động điên rồ trên web. Những cái này có thể hoạt động trên tất cả các trình duyệt và các yếu tố trang để kiểm soát các mục điều hướng, thả xuống, tab, bạn đặt tên cho nó.

    Trong thực tế, bạn thậm chí có thể tạo các mã này một cách linh hoạt bằng các công cụ hoạt hình. Nhưng những thứ đó khá hạn chế so với một thư viện hoạt hình đầy đủ.

    CSS xấu xa là thư viện mới nhất của loại hình này. Điều này làm tôi nhớ đến sớm Animate.css khá đơn giản và thô sơ, nhưng có thể được sử dụng trong hầu hết các trang web.

    Hãy xem qua trang chủ để xem bản demo trực tiếp cùng với danh sách tất cả các hình ảnh động được hỗ trợ. Khi viết bài này, tôi đếm Tổng số 24 kiểu hoạt hình từ slide đến xoay và hiệu ứng xung / nảy.

    Nhiều trong số các hình ảnh động này là các tính năng một lần được sử dụng để đưa một yếu tố vào chế độ xem (hoặc ngoài tầm nhìn). Điều này rất hữu ích cho các trang có hoạt ảnh cuộn để xem nhắm mục tiêu các yếu tố trang cụ thể.

    Nhưng bạn cũng có thể sử dụng điều này để hiển thị (hoặc ẩn) các mục trang thêm như menu thả xuống, thanh tìm kiếm, hình thức đăng ký ẩn hoặc bất cứ thứ gì khác. Đây là một danh sách nhỏ các hình ảnh động bạn có thể chọn từ:

    • Lắc
    • Phóng to / thu nhỏ
    • Trượt lên / xuống
    • Mất dần vào / ra
    • Lăn vào / ra
    • Bounce và pop
    • Xoay vòng vào / ra

    Tất cả các kiểu hoạt hình này được thiết kế cho một lần sử dụng. Chúng có thể được gọi nhiều lần trên mỗi trang và mỗi phần tử, nhưng đây không phải là lặp lại hình ảnh động.

    Thay vào đó, bạn sẽ sử dụng những thứ này dựa trên hiệu ứng nhấp, di chuột hoặc vuốt của người dùng. Chúng cũng có thể được sử dụng trên các nút CTA cho các hiệu ứng xung / đập, nhưng điều đó đòi hỏi phải có chức năng định thời JavaScript.

    Hãy xem trang ví dụ để xem trước trực tiếp và một số chi tiết khác. Bạn cũng sẽ tìm thấy tài liệu đầy đủ trên trang web chính cùng với repo GitHub.

    Wicky CSS là một thư viện mới hơn vì vậy nó chưa có lượng người theo dõi lớn. Nhưng thư viện ổn định và có khả năng nó sẽ tồn tại trong nhiều năm tới.