Tạo kiểu cho hộp kiểm tra hiệu ứng hoạt hình của riêng bạn với Checkbox.css
Trong một bài đăng gần đây, tôi đã trình bày một thư viện hoạt hình thú vị cho các nút radio tùy chỉnh, được cung cấp bởi CSS.
Thư viện miễn phí đó được phát hành bởi 720kb và nhanh chóng thấy một thay thế tiếp theo được gọi là Checkbox.css. Điều này hoạt động theo cách tương tự, ngoại trừ nó phong cách và hoạt hình các hộp kiểm HTML.
Thư viện này là một bộ thư viện với ba mục đích riêng biệt:
Radiobox.css- hoạt hình đài phát thanh tùy chỉnhHộp kiểm.css- hình động hộp kiểm tùy chỉnhĐã kiểm tra.css- kiểu & hoạt hình các yếu tố được chọn hiện có (radio & hộp kiểm)
Tất cả đều được phát triển bởi cùng một nhóm và chúng hoạt động theo cách tương tự. Nhưng bạn sẽ cần phải bao gồm mỗi thư viện riêng nếu bạn muốn có được hiệu ứng đầy đủ.
Hãy xem qua Checkbox.css GitHub để xem một số tính năng này và cách chúng hoạt động. Theo mặc định, họ dựa vào Chuyển đổi 2D cùng với chuyển tiếp CSS, tùy thuộc vào hỗ trợ trình duyệt.
Không có thư viện nào trong số này đi kèm với các phương thức dự phòng JS, vì vậy chúng thực sự chỉ hoạt động cho các hình ảnh động do CSS cung cấp. Nhưng, một cái nhìn nhanh vào trang demo sẽ khiến bạn thích thú khi thêm những hình ảnh động này vào trang của bạn.
Quá trình không thể đơn giản hơn và nó đòi hỏi ít kiến thức về mã hóa (mặc dù nó luôn hữu ích để có một số).
Khi biểu định kiểu CSS có trên trang của bạn, chỉ cần thêm một lớp vào hộp kiểm của bạn với định dạng hộp kiểm-x nơi “x” đại diện cho bất kỳ hoạt hình nào bạn muốn. Ví dụ: đây là mã cho “nhảy” hiệu ứng hoạt hình:
Phần tốt nhất là làm thế nào thư viện này có thể làm việc cùng với định dạng nút radio, quá. Tôi chắc chắn sẽ giới thiệu thư viện Checked.css nếu bạn muốn làm động các yếu tố được chọn hiện có.
Đừng để tất cả những phụ thuộc này làm bạn sợ. Khá nhiều người có thể thiết lập thư viện Checkbox.css hoặc bất kỳ thư viện liên quan nào, tất cả từ đầu với một bản sao nhỏ và dán.
Và, nếu bạn có câu hỏi hoặc đề xuất cho gói thư viện hoạt hình đầu vào này, hãy thử nhắn tin cho người tạo thông qua trang web của họ hoặc trên Twitter @ 720kb_.
