Tạo các nút radio hoạt hình vui nhộn với Radiobox.css

Các các nút radio HTML5 mặc định khá nhàm chán. Có nhiều cách để tùy chỉnh chúng sử dụng CSS3, nhưng hầu hết các kỹ thuật chỉ tập trung vào ngoại hình.

Radiobox.css tập trung vào nhìn và Phong cách thêm hình ảnh động CSS3 tùy chỉnh vào đầu vào radio.

Thư viện này là hoàn toàn miễn phí và mã nguồn mở, có sẵn trên GitHub để tải xuống. Với thư viện CSS này, bạn có thể chọn từ hơn 12 hình ảnh động khác nhau áp dụng cho các nút radio.

Không có kiểu CSS tùy chỉnh, họ vẫn sẽ trông giống như đầu vào radio bình thường. Nhưng khi người dùng nhấp để chọn một nút, họ sẽ có được một hiệu ứng hoạt hình điên rồ. Bạn có thể thấy ví dụ sống trên trang Radiobox chính sẽ trình diễn từng kiểu bên cạnh tên của nó.

Bạn có thể cài đặt Radiobox trực tiếp từ npm hoặc bower, hoặc thậm chí tải các tệp cục bộ về máy của bạn. GitHub lưu trữ tất cả các tệp của họ trong CDN nếu bạn muốn chơi xung quanh mà không tải xuống bất cứ điều gì.

Các tập tin duy nhất bạn cần là radiobox.min.css cái nào nên đi ngay vào đầu tài liệu của bạn. Từ đó, bạn chỉ cần thêm một lớp đơn giản đến từng nút radio tùy thuộc vào hình động bạn muốn.

Đây là một đoạn mã cho “chèo thuyền” hiệu ứng:

Lưu ý “chèo thuyền” hoạt hình không có tập tin CSS của riêng nó gọi là boing.min.css. Điều này phải được bao gồm nếu bạn có kế hoạch sử dụng hiệu ứng đó trên trang.

Khi bạn tải xuống Radiobox, bạn nên lấy một thư mục demo với bản demo trực tiếp cho tất cả các hiệu ứng này. Bạn có thể đơn giản sao chép / dán mã trực tiếp đến trang của bạn để làm cho nó hoạt động mà không gặp rắc rối.

Dành cho tài liệu đầy đủ, kiểm tra repo chính cùng với trang web demo trực tiếp. Nếu bạn muốn liên hệ với người tạo, bạn có thể gửi email từ Trang web 720kb hoặc nhắn tin qua Twitter @ 720kb_.