Πώς να προσθέσετε κινούμενα σχέδια στο SVG με CSS

Sep 14, 2025

πως να

[Εικόνα: Σχεδιαστής ιστοσελίδων]

Όταν πρόκειται να κινηθεί με το SVGS, μια μεγάλη απενεργοποίηση μπορεί να είναι η ιδέα να βρεθεί σε βιβλιοθήκες JavaScript. Ωστόσο, αυτό δεν χρειάζεται να συμβαίνει. Το CSS μπορεί να χειριστεί την επιλογή μεμονωμένων διαδρομών εντός ενός SVG για να δημιουργήσει εφέ. Απλά γνωρίζοντας τα βασικά στοιχεία μπορεί να σημαίνει ότι είναι δυνατό να μετατρέψετε επίπεδη, κλισέ εικονίδια σε κάτι πιο εντυπωσιακό. Έτσι ίσως ήρθε η ώρα να περάσετε από τα θεμελιώδη βήματα της βελτιστοποίησης και των κινούμενων εικόνων SVG. Όταν ενσωματώνεται σε διαφορετικά σχέδια, δεν χρειάζεται να συνειδητοποιήσετε ότι οι δυνατότητες είναι ατελείωτες.

Για περισσότερη έμπνευση κίνησης, ρίξτε μια ματιά στο Creative Bloq's Guide Παραδείγματα κινούμενων σχεδίων CSS και πώς να τους κωδικοποιήσετε.

Εξοικονομήστε £ 100 με ένα εξαιρετικά πρώιμο εισιτήριο Δημιουργία CSS , η μονοήμερη διάσκεψη Web που φιλοξενείται από δημιουργικό Bloq, Web Designer Magazine και Net Magazine. Βιβλίο εδώ .

01. Δημιουργία και αποθήκευση

Πρώτον, δημιουργήστε ένα SVG για να συνεργαστείτε. Για αυτό το σεμινάριο, θα χρησιμοποιήσουμε ένα απλό γραφικό που κατασκευάζεται στο Illustrator. Όταν χρησιμοποιείτε το Illustrator για να εξαγάγετε ένα SVG Μειώστε το μέγεθος του Artboard για να τοποθετήσετε το γραφικό και, στη συνέχεια, κάντε κλικ στο κουμπί "Αποθήκευση ως". Επιλέξτε SVG από το αναπτυσσόμενο μενού "Αποθήκευση ως τύπου", τότε "SVG Code ..." στο διάλογο επιλογών SVG.

02. Βελτιστοποιήστε τον ιστό

SVG screenshot — Κάντε κλικ στο εικονίδιο στην επάνω δεξιά πλευρά για μεγέθυνση της εικόνας [Εικόνα: SVGOMG]

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

03. Ρυθμίστε ένα έγγραφο HTML

Ανοίξτε τον επεξεργαστή κωδικού επιλογής και ρυθμίστε ένα κενό έγγραφο HTML. Θα γράψουμε το css animation σε ένα αρχείο που ονομάζεται main.css , έτσι δημιουργήστε και αυτό. Για να διατηρήσετε τα πράγματα που επικεντρώνονται στην κινούμενη εικόνα, έχουμε τραβήξει την έκδοση μόνο CSS του bootstrap 4.1.3.

04. Κατασκευάστε τη διάταξη

Ας χτίσουμε τα οστά της διάταξης μας και να κάνουμε ένα χώρο για το svg μας. Έχουμε προσθέσει μια κεφαλίδα και δύο στήλες: ένα στα αριστερά για κάποιο κείμενο και ένα στα δεξιά, που θα κρατήσει το SVG που θα είμαστε κινούμενοι. Για να ζωντανέψετε τη σελίδα επάνω, χρησιμοποιήστε ένα δεύτερο, στατικό, svg ως φόντο στην ετικέτα του σώματος.

05. Τοποθετήστε το SVG

Χρησιμοποιούμε το animation μας για να κάνετε την εισαγωγή στην κορυφή της σελίδας πιο ενδιαφέρον. Επικολλήστε τον βελτιστοποιημένο κώδικα SVG στη δεύτερη στήλη στη σελίδα. Εάν χρησιμοποιείτε bootstrap, δώστε στο SVG την τάξη img-υγρό Για να βεβαιωθείτε ότι ζυγίζετε σε κινητά τηλέφωνα.

06. Προσθέστε μαθήματα στο SVG

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

 & lt; svg & gt;
& lt; g & gt;
& lt; rect class = "recebackground" πλάτος = "147.4107"
Ύψος = "68.7917" x = "31.2946" y = "114.1042"
rx = "4.5882" ry = "3.9565" fill = "# 2A7fff" / & gt;
& lt; path class = "rectrytext" d = "..." Vector-effect = "μη-κλιμακωτή" stroke-width = ".
Συμπληρώστε το κανόνα = "itroke" stroke = # fff "stroke-linecap =" round "/ & gt;
& lt; / g & gt;
& lt; / svg & gt;

07. Αρχικές καταστάσεις

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

 PATH.RECTTEXT {
αδιαφάνεια: 0;
}
rect.rectbackground {
αδιαφάνεια: 0;
}

08. Δηλώστε τα κινούμενα σχέδια

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

 @keyframes textdraw {
0% {}
50% {}
100% {}
}
@ beyframes rectfade {
από{}
προς την{}
}

09. Εκχωρήστε κινούμενα σχέδια και ιδιότητες

SVG and coding — Κάντε κλικ στο εικονίδιο στην επάνω δεξιά γωνία για μεγέθυνση της εικόνας [Εικόνα: Joseph Ford]

Προσθέτουμε το εφεδρεία Κινούμενα σχέδια στο recebackground στοιχείο και να το δώσει μια διάρκεια ενός δευτερολέπτου. Ενα ησυχία Το Cubic Bezier χρησιμοποιείται για να το δώσει μια πιο ομαλή αίσθηση. Προσθέτουμε εμπρός Έτσι το στοιχείο διατηρεί τις ιδιότητες του τελευταίου keyframe όταν τελειώνει η κινούμενη εικόνα.

 rect.rectbackground {
αδιαφάνεια: 0;
Κινούμενα σχέδια: Ορθωση 1S Cubic-Bezier (0,645,
0,045, 0,355, 1) προς τα εμπρός.
}

10. Το animation ορθογώνιο

SVG image — Κάντε κλικ στο εικονίδιο στην επάνω δεξιά γωνία για μεγέθυνση της εικόνας [Εικόνα: Joseph Ford]

Με μόλις δύο βασικά πλαίσια, το μόνο που πρέπει να κάνουμε για το ορθογώνιο μας είναι ένα σύνολο χαρακτηριστικών έναρξης και τερματισμού. Ας ξεκινήσουμε με ένα 1% Πλάτος και τελειώστε 100% να δώσει ένα «επεκτατικό προς το σωστό αποτέλεσμα». Μπορούμε επίσης να ορίσετε αδιαφάνεια: 1 στο τελευταίο βασικό πλαίσιο, ώστε το σχήμα να εξασθενίσει ταυτόχρονα.

 @keyframes rectfade {
από {
Πλάτος: 1%.
}
προς την {
Πλάτος: 100%.
αδιαφάνεια: 1;
}
}

11. Η κινούμενη εικόνα κειμένου

Θα δημιουργήσουμε ένα εφέ γραμμής στο κείμενό μας και στη συνέχεια, χρησιμοποιήστε μια πλήρωση για να εξασθενίσει μέσα. Για να ρυθμίσετε το κείμενο Animation μας το δώσουμε κειμάκια με μια τέσσερα δευτερόλεπτα. Ο κυβικός Bezier έχει τροποποιηθεί σε αυτό το βήμα για να του δώσει ένα ελαφρώς διαφορετικό ρυθμό κίνησης.

 PATH.RECTTEXT {
αδιαφάνεια: 0;
Κινούμενα σχέδια: TextDraw 4s
Cubic-Bezier (.56, -0.04, .32, .7) προς τα εμπρός.
}

12. Καθυστέρηση της εκκίνησης

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

 PATH.RECTTEXT {
αδιαφάνεια: 0;
Κινούμενα σχέδια: TextDraw 4s
Cubic-Bezier (.56, -0.04, .32, .7) προς τα εμπρός.
Κίνηση-καθυστέρηση: 1s;
}

13. Σχέδιο γραμμής μιμώντας γραμμή

SVG animation — Κάντε κλικ στο εικονίδιο στην επάνω δεξιά γωνία για μεγέθυνση της εικόνας [Εικόνα: Joseph Ford]

Για να πάρετε το αποτέλεσμα σχεδίασης γραμμής, θα χρησιμοποιήσουμε το εγκεφαλικό επεισόδιο και εγκεφαλικό επεισόδιο Παράμετροι. Οι αξίες σας θα είναι διαφορετικές από το δικό μου ανάλογα με το SVG που χρησιμοποιείτε. Για να βρείτε την αξία σας, χρησιμοποιήστε τα προτιμώμενα εργαλεία προγραμματιστή και την αύξηση εγκεφαλικό επεισόδιο από 0 Μέχρι ολόκληρο το σχήμα καλύπτεται από ένα εγκεφαλικό επεισόδιο.

 PATH.RECTTEXT {
αδιαφάνεια: 0;
Stroke-Dasharray: 735;
Κινούμενα σχέδια: TextDraw 4s
Cubic-Bezier (.56, -0.04, .32, .7) προς τα εμπρός.
Κίνηση-καθυστέρηση: 1s;
}

14. Βασικό κείμενο σχεδίασης πρώτης γραμμής

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

 0% {
Συμπληρώστε: RGB (255, 255, 255, 0).
εγκεφαλικό επεισόδιο: #FFF;
εγκεφαλικό επεισόδιο: 800;
αδιαφάνεια: 1;
}

15. Σχεδιάστε τις γραμμές

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

 40% {
stroke-dashoffset: 0;
Συμπληρώστε: RGB (255, 255, 255, 0,0).
}

16. Συμπληρώστε το σχήμα

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

 100% {
Συμπληρώστε: RGB (255, 255, 255, 1).
stroke-dashoffset: 0;
αδιαφάνεια: 1;
}

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

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

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

Πώς να προσθέσετε κινούμενα σχέδια στο SVG με CSS

01. Δημιουργία και αποθήκευση

02. Βελτιστοποιήστε τον ιστό

03. Ρυθμίστε ένα έγγραφο HTML

04. Κατασκευάστε τη διάταξη

05. Τοποθετήστε το SVG

06. Προσθέστε μαθήματα στο SVG

07. Αρχικές καταστάσεις

08. Δηλώστε τα κινούμενα σχέδια

09. Εκχωρήστε κινούμενα σχέδια και ιδιότητες

10. Το animation ορθογώνιο

11. Η κινούμενη εικόνα κειμένου

12. Καθυστέρηση της εκκίνησης

13. Σχέδιο γραμμής μιμώντας γραμμή

14. Βασικό κείμενο σχεδίασης πρώτης γραμμής

15. Σχεδιάστε τις γραμμές

16. Συμπληρώστε το σχήμα

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

Πώς να κάνετε ένα meme στο Photoshop

Δημιουργήστε ένα ελεγχόμενο από ποντίκι με ελεγχόμενο φόντο παράλλαξης

Πώς να σχεδιάσετε μια γάτα

Μάθετε να ζωντανεύετε για παιδιά

Πώς να συνεργαστείτε με το βίντεο HTML

3D Tutorial Text για γραφιστικούς σχεδιαστές

10 χρυσοί κανόνες για την ανταποκρινόμενη SVGS

Προετοιμασία της εργασίας σας για εκτύπωση 3D: 8 κορυφαίες συμβουλές

Κατηγορίες