Στυλ το δικό σας πλαίσιο ελέγχου Animation Effects με Checkbox.css
Σε μια πρόσφατη ανάρτηση, κάλυψα μια βιβλιοθήκη ψυχαγωγίας animation για προσαρμοσμένα κουμπιά ραδιοφώνου, powered by CSS.
Αυτή η ελεύθερη βιβλιοθήκη απελευθερώθηκε από 720kb και γρήγορα είδε ένα εναλλακτική παρακολούθηση που ονομάζεται Checkbox.css. Αυτό λειτουργεί με παρόμοιο τρόπο, εκτός από αυτό Restyles και animates κουτιά ελέγχου HTML.
Αυτή η βιβλιοθήκη έρχεται ως σουίτα βιβλιοθηκών τρεις διαφορετικούς σκοπούς:
Radiobox.css- προσαρμοσμένες ραδιοφωνικές κινήσειςCheckbox.css- προσαρμοσμένα κινούμενα γραφικάChecked.css- στυλ & ζωντανεύει τα υπάρχοντα επιλεγμένα στοιχεία (ραδιόφωνα και πλαίσια ελέγχου)
Όλα αυτά αναπτύσσονται από την ίδια ομάδα και δουλεύουν με παρόμοιο τρόπο. Αλλά θα πρέπει να να συμπεριλάβει κάθε βιβλιοθήκη ξεχωριστά αν θέλετε να πάρετε τα πλήρη αποτελέσματα.
Ρίξτε μια ματιά στο Checkbox.css GitHub για να δείτε μερικά από αυτά τα χαρακτηριστικά και πώς λειτουργούν. Από προεπιλογή, βασίζονται Το 2D μετασχηματίζεται μαζί με μεταβάσεις CSS, ανάλογα με την υποστήριξη του προγράμματος περιήγησης.
Καμία από αυτές τις βιβλιοθήκες δεν έρχεται με JS εναλλακτικές μεθόδους, έτσι πραγματικά λειτουργούν μόνο για animations που κινούνται με CSS. Αλλά, μια γρήγορη ματιά στη σελίδα επίδειξης θα πρέπει να έχετε την ευχαρίστηση να προσθέσετε αυτά τα κινούμενα σχέδια στη σελίδα σας.
Η διαδικασία δεν θα μπορούσε να είναι απλούστερη και αυτό απαιτεί ελάχιστη γνώση κωδικοποίησης (αν και είναι πάντα χρήσιμο να έχουμε μερικούς).
Μόλις το φύλλο στυλ CSS βρίσκεται στη σελίδα σας, προσθέστε μια κλάση στο πλαίσιο ελέγχου σας με τη μορφή πλαίσιο ελέγχου-x όπου το “Χ” αντιπροσωπεύει οποιαδήποτε κινούμενη εικόνα θέλετε. Για παράδειγμα, εδώ είναι ο κωδικός για το “άλμα” εφέ κίνησης:
Το καλύτερο μέρος είναι πώς μπορεί αυτή η βιβλιοθήκη εργασία σε συνδυασμό με τη μορφή ραδιοφώνου, πολύ. Σίγουρα θα συνιστούσα τη βιβλιοθήκη Checked.css αν θέλετε ζωντανά υπάρχοντα επιλεγμένα στοιχεία.
Μην αφήσετε όλες αυτές τις εξάρσεις να σας φοβίσουν. Αρκετά πολύς μπορεί να δημιουργήσει τη βιβλιοθήκη Checkbox.css ή οποιαδήποτε από τις σχετικές βιβλιοθήκες, όλα από το μηδέν με ένα μικρό αντίγραφο & επικόλληση.
Και εάν έχετε ερωτήσεις ή προτάσεις για αυτό το πακέτο βιβλιοθηκών κίνησης εισόδου, δοκιμάστε να στέλνετε μηνύματα στους δημιουργούς μέσω του ιστότοπού τους ή στο Twitter @ 720kb_.
