Δημιουργία κινούμενων CSS Art

Feb 2, 2026

πως να

(Πιστωτική εικόνα: Tiffany Choong)

Η δημιουργία εικόνων CSS είναι ένας διασκεδαστικός τρόπος για να εξασκήσετε τις δεξιότητές σας και να δημιουργήσετε ένα κομψό κομμάτι έργου τέχνης. Είναι ένα ωραίο διάλειμμα από τη συνηθισμένη καθημερινή στυλ των εξαρτημάτων Web. Το μόνο που θα χρειαστεί να ξεκινήσετε είναι ένα κενό έγγραφο και ένα αρχείο CSS. Συνιστούμε να χρησιμοποιήσετε τη Sass, η οποία θα σας επιτρέψει να επαναχρησιμοποιήσετε τα στυλ σας και να γράψετε απλούστερους επιλογείς (δείτε τον οδηγό μας Τι είναι η SASS; για να μάθετε περισσότερα σχετικά με αυτόν τον προεπεξεργαστή).

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

Για περισσότερη έμπνευση, εξερευνήστε τη στρογγυλοποίηση του καταπληκτικού Παραδείγματα κινούμενων σχεδίων CSS . Μετά από κάτι πιο βασικό; Ξεκινήστε από τη μάθηση Πώς να δημιουργήσετε έναν πάγο Lolly χρησιμοποιώντας το CSS .

Ή, αν ξεκινήσετε μια νέα τοποθεσία, χτυπήστε την πολυπλοκότητα με ένα λαμπρό οικοδόμος ιστότοπου και βεβαιωθείτε ότι έχετε κάνει το δικό σας web hosting spot on.

Μειώστε το σχέδιο σε απλά σχήματα

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

Χρησιμοποιήστε ένα φωτεινό φόντο για να βοηθήσετε στην τοποθέτηση

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

Χρησιμοποιήστε μεγέθη υγρών

Όταν πρόκειται για τον ορισμό μιας τιμής PX για ιδιότητες, θα συνιστούσαμε τη χρήση της μονάδας REM. Σε περίπτωση που αποφασίσετε ότι θέλετε το συνολικό κομμάτι σας να είναι μεγαλύτερο ή μικρότερο, χρησιμοποιώντας μονάδες REM που πρέπει μόνο να αλλάξετε τη βάση html {μέγεθος γραμματοσειράς: ... px} Στη SASS σας για να κλιμακώσετε ολόκληρο το έργο τέχνης προς τα πάνω ή προς τα κάτω.

Όταν ορίζετε τα ύψη και τα πλάτη των παιδιών στοιχείων που θα πρέπει να έχουν σχετικό μέγεθος στον γονέα, τα ποσοστά έρχονται σε εύχρηστη. Δεδομένου ότι αυτές οι τιμές είναι πάντα σε σχέση με τον γονέα τους, θα πρέπει επίσης να κλιμακωθούν με το Μέγεθος γραμματοσειράς HTML .

Generate CSS — Δημιουργία CSS είναι ένα διάσκεψη που σας έφερε το Creative Bloq, Net και Web Designer. Κάντε κλικ για να κλείσετε το πρώιμο εισιτήριο πουλιών! (Πιστωτική πίστωση: Getty / Future)

01. Ξεκινήστε με τα δοχεία

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

 & lt; div class = "εμπορευματοκιβώτιο" & gt;
& lt; div class = "κεφάλι" & gt; / div & gt;
& lt; div class = "σώμα" & gt; / div & gt;
& lt; div class = "μπαλόνια" & gt; / div & gt;
& lt; / div & gt;

Το δοχείο πρέπει συνήθως να είναι Θέση: Σχετική για να επιτρέψουν τα άλλα στοιχεία να τοποθετηθούν σχετικά μέσα της χρησιμοποιώντας Θέση: Απόλυτη Και έχουν ένα σαφώς καθορισμένο ύψος και πλάτος, διαφορετικά η τοποθέτηση των παιδιών στοιχείων γίνεται δύσκολη.

Στα στυλ σας, προσθέστε τα χρώματα βάσης ως μεταβλητές SASS για επαναχρησιμοποίηση. Η sass φωτίζω() και αμαυρώνω() Οι λειτουργίες θα δημιουργήσουν αποχρώσεις και αποχρώσεις των χρωμάτων σας, οι οποίες μπορούν να χρησιμοποιηθούν ως επισημάνσεις ή σκιές για το χαρακτήρα σας.

02. Στυλ το κεφάλι

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

Τα χαρακτηριστικά του προσώπου θα χρειαστούν ένα δοχείο για τοποθέτηση, οπότε δημιουργήστε ένα & lt; div & gt; Μέσα στο δοχείο κεφαλής για το κίτρινο σχήμα με πλάτος, ύψος και χρώμα φόντου - Ας κάνουμε αυτό το ορθογώνιο μοιάζει περισσότερο με σχήμα κεφαλής. Μία από τις πιο κοινές και χρήσιμες ιδιότητες στην τέχνη του CSS είναι η ακτίνα συνοριακής ακτίνας Το ακίνητο, το οποίο αλλάζει την καμπύλη των γωνιών x ή y των γωνιών του κιβωτίου και μπορεί να χρησιμοποιηθεί για τη δημιουργία πιο οργανικών σχημάτων.

Χρησιμοποιώντας αυτή την τεχνική με ένα σύνθετο REM και ποσοστό, μπορείτε να κάνετε σχήματα που μοιάζουν με κηλίδες αντί για απλές ελλείψεις, οι οποίες κλίμακα φυσικά με το html {μέγεθος γραμματοσειράς: ... px} :

.
Σύνορα-άνω-αριστερή ακτίνα: 50% 4.5Rem;
Σύνορα-κορυφή-δεξιά-ακτίνα: 50% 4.5Rem;
Στρίψτε-κάτω-αριστερή ακτίνα: 50% 3rem;
Σύνορα-δεξιά-δεξιά-ακτίνα: 50% 3rem;
...
}

Μετά την τελειοποίηση του κεφαλιού ακτίνα συνοριακής ακτίνας , τοποθετήστε τα υπόλοιπα χαρακτηριστικά του προσώπου ως παιδικά στοιχεία του κεφαλιού, όπως τα μάτια, τα μάγουλα, τη μύτη και τα αυτιά. Όπως το κεφάλι, το ακτίνα συνοριακής ακτίνας το τέχνασμα θα έρθει σε εύχρηστο από τότε Ακτίνα συνοριακής ακτίνας: 50% Δεν μπορεί να φανεί ελκυστική.

03. Μετακίνηση στο σώμα

Ένα σώμα & lt; div & gt; μπορεί να τοποθετηθεί μέσα στο δοχείο του σώματος πίσω από το κεφάλι και να διαμορφωθεί με το ίδιο ακτίνα συνοριακής ακτίνας Τεχνική, καθώς και τα χέρια, τα πόδια και την ουρά. Για να επιτρέψετε την κατάλληλη αλληλεπικάλυψη, το πραγματικό σώμα θα πρέπει να είναι το δικό του στοιχείο, καθώς ορισμένα εσωτερικά στοιχεία όπως οι πίσω λωρίδες θα πρέπει να αποκοπούν με Overflow: Κρυμμένο . Για να δώσει το σώμα περισσότερο βάθος, το Μετασχηματισμός: Skew () η ιδιοκτησία μπορεί ελαφρώς το σώμα.

Η ουρά του μπουλονιού αστραπής μπορεί να κατασκευαστεί χρησιμοποιώντας τρία ξεχωριστά ορθογώνια αντί να προσπαθούν να σχηματίσουν αυτό το σχήμα από ένα στοιχείο. Τα ορθογώνια μπορούν να περιστραφούν και να τοποθετηθούν πάνω από την κορυφή του άλλου για να σχηματίσουν ένα μπουλόνι. Τα χέρια και τα πόδια μπορούν να χρησιμοποιήσουν το πιο σκούρο πρωταρχικό χρώμα που δημιουργήσαμε χρησιμοποιώντας sass αμαυρώνω() Έτσι ξεχωρίζουν.

04. Προσθέστε μπαλόνια

Τώρα που ολοκληρώνεται το ηλεκτρικό ποντίκι, ας συνδέσουμε τα μπαλόνια στην πλάτη του. Προσθέστε μερικά & lt; div & gt; s με κοινόχρηστα στυλ με παιδική συμβολοσειρά & lt; div & gt; και τοποθετήστε τους να συσσωρεύονται πάνω από το κεφάλι. Η συμβολοσειρά είναι αόρατη εκτός από ένα σύνορα αριστερά , που βοηθούν να φανεί πιο σαν συμβολοσειρά.

Να δέσει τη συμβολοσειρά γύρω από τη μέση του χαρακτήρα, α & lt; div & gt; μπορεί να τοποθετηθεί μέσα στο σώμα για να επιτρέψει την κατάλληλη τοποθέτηση. Η συμβολοσειρά χρειάζεται μια ελαφρά καμπύλη για να εμφανιστεί σαν να είναι δεμένη γύρω από το σώμα, έτσι μπορεί να έχει ένα μικρό ύψος, σύνορο και ένα σύνορο Αριστερά και δεξιά ακτίνα, η οποία κάνει μια λεπτή καμπύλη γραμμή:

.
Ύψος: 1Rem;
Πλάτος: 9Rem;
Σύνορα-δεξιά: Στερεά 1PX $ WHITE.
Σύνορα αριστερά: Στερεά 1px $ White?
Border-Button: Στερεά 1px $ White.
Αριστερά-Αριστερά-Αριστερά: 50% 1Rem;
Στρίψτε-κάτω-δεξιά-ακτίνα: 50% 1rem;
}

05. Ζωντανή το CSS

Μπορούμε να δώσουμε τη ζωή χαρακτήρων προσθέτοντας @Keyframes κινούμενα σχέδια. Τα χέρια, τα πόδια, τα αυτιά και η ουρά μπορούν να κινηθούν με Μετασχηματισμός: Περιστροφή () . Βεβαιωθείτε ότι το μετασχηματισμού ορίζεται στον «κοινό» (δηλ. Κέντρο κορυφής για ένα πόδι) και ρυθμίστε την περιστροφή. Αυτός ο τύπος κινούμενης εικόνας μπορεί να χρησιμοποιηθεί αρκετές φορές σε ένα sass mixin:

 @mixin animaterotate ($ όνομα, $ start, $ end) {
@keyframes # {$ όνομα} {
0%, 100% {Μετασχηματισμός: Περιστροφή (# {$ start} deg)}
50% {Μετασχηματισμός: Περιστροφή (# {$ end} deg)}
}
}

Τέλος, προσθέτοντας ένα αργό 5S Μετατροπή: Μεταφράσεις () Το KeyFrame Animation θα κινήσει τον χαρακτήρα πάνω και κάτω σαν να επιπλέει. Για ένα άγγιγμα ρεαλισμού, μια αναβοσβήνει κινούμενα σχέδια χρησιμοποιώντας Μετασχηματισμός: Salvey (0,1) Το ακίνητο μπορεί να χρησιμοποιηθεί για να εμφανιστεί σαν να κλείνουν τα μάτια.

Αυτό το άρθρο δημοσιεύθηκε αρχικά στο Creative Web Design Magazine καθαρά . Αγοράστε τεύχος 283 ή Εγγραφείτε .

Διαβάστε περισσότερα:

5 πράγματα που ποτέ δεν ήξερε για το CSS
Προσθέστε φίλτρα SVG με CSS
Πώς να κωδικοποιήσετε τα εφέ έξυπνων κειμένων με το CSS

Δημιουργία κινούμενων CSS Art

01. Ξεκινήστε με τα δοχεία

02. Στυλ το κεφάλι

03. Μετακίνηση στο σώμα

04. Προσθέστε μπαλόνια

05. Ζωντανή το CSS

πως να - Τα πιο δημοφιλή άρθρα

Εξερευνήστε την απεικόνιση δεδομένων με p5.js

Σταματήστε τα bots με το google recaptcha

Πώς να αλλάξετε το μέγεθος μιας εικόνας στο Photoshop

Μάθετε να μοντελοποιήσετε ένα άτομο σε ZBrush και Maya

Πώς να δημιουργήσετε ένα ρομπότ χαρτιού

Δημιουργία Slick Ui Animations

Βάλτε ένα πορτρέτο σε έλαια

15 Συμβουλές για βελτιστοποίηση διασταυρούμενων συσκευών

Κατηγορίες