Δημιουργία περιστρεφόμενων και φορτωτών μονού στοιχείου με CSSPIN

Μπορείτε να δημιουργήσετε μερικά από τα καταπληκτικά πράγματα με το CSS3 προσαρμοσμένα πεδία εισαγωγής προς το dropdowns και ακόμα διανυσματικά γραφικά. Αυτές οι τεχνικές είναι γρήγορα ξεπερνώντας το JavaScript, καθιστώντας ευκολότερο για τους προγραμματιστές να δημιουργήσουν καλύτερες εμπειρίες χρηστών.

Ένα από τα πιο δύσκολα πράγματα που πρέπει να οικοδομήσουμε είναι ένα φόρτωση animation spinner αλλά η σύγχρονη κινούμενη ζωγραφική CSS καθιστά αυτό αρκετά απλό.

Για να εξοικονομήσετε χρόνο από την αρχή, μπορείτε να χρησιμοποιήσετε μια βιβλιοθήκη όπως CSSPIN με τους τόνους προκαθορισμένες προσαρμοσμένες κλωστές. Όλα αυτά τα κινούμενα σχέδια είναι ελεύθερα να κλωνοποιηθούν και να είναι απόλυτα ανοιχτά, έτσι έχετε πλήρης πρόσβαση για να επεξεργαστείτε τον κωδικό όπως θέλετε.

Η δημιουργία ενός περιστρεφόμενου με αυτή τη βιβλιοθήκη είναι ένα αεράκι. Εσείς απλά αντιγράψτε τη βιβλιοθήκη CSS στη σελίδα σας, στη συνέχεια προσθέστε τα προσαρμοσμένα στοιχεία HTML όπου θέλετε να εμφανίζονται.

Αυτές οι συνήθεις κλώστες χρησιμοποιούν μόνο ένα στοιχείο HTML για να δημιουργήσετε το εφέ κίνησης. Αυτό είναι τεράστιο γιατί το γραφικό και το εφέ κίνησης είναι που έγινε αποκλειστικά μέσω των τάξεων CSS.

Και αφού έχετε πρόσβαση στον πηγαίο κώδικα μπορείτε αντικαταστήστε τα σχήματα, τα χρώματα, τα μεγέθη και τις ταχύτητες κινούμενων εικόνων για να ταιριάζει καλύτερα στα έργα σας.

Απλά σημειώστε τον κώδικα χρησιμοποιεί σύντομη σύνταξη, έτσι θα πρέπει να είστε εξοικειωμένοι με τη γλώσσα προετοιμασίας για να κάνετε οποιεσδήποτε σημαντικές αλλαγές.

Αλλά, μπορείτε να βρείτε πολλά απλά παραδείγματα CSS στην κύρια σελίδα επίδειξης, μαζί με απλές οδηγίες στη σελίδα GitHub.

Αν είστε εξοικειωμένοι με npm ή Κληματαριά αυτά είναι εναλλακτικές μεθόδους για την εγκατάσταση της βιβλιοθήκης.

Ανεξάρτητα από το πώς το εγκαθιστάτε, αυτή είναι μια μεγάλη βιβλιοθήκη animation CSS για να συνεργαστείτε. Ήταν γραφτό να γίνει πλήρως αρθρωτό με πολλά περιθώρια για νέες κλώστες, νέα κινούμενα σχέδια και προσαρμογές από άλλους προγραμματιστές.

Για να μάθετε περισσότερα και να περιηγηθείτε σε όλη την τεκμηρίωση, ελέγξτε το CSSPIN repo στο GitHub. Ο δημιουργός έκανε επίσης ένα μικρό ρυθμίστε το βίντεο που μπορείτε να παρακολουθήσετε παρακάτω.