Η γλώσσα HTML παρέχει τη δομή της ιστοσελίδας και το CSS παρέχει το σχεδιασμό και τη μορφοποίηση αυτής της εφαρμογής. Αυτός ο συνδυασμός σας επιτρέπει επίσης να προσθέσετε κινούμενα σχέδια, καθώς τα κινούμενα στοιχεία φαίνονται πιο ελκυστικά σε σύγκριση με τα στατικά στοιχεία. Αφήνει επίσης ένα στοιχείο να αλλάξει το στυλ του σταδιακά.
Αυτό το άρθρο θα καθοδηγήσει πώς μπορούμε να εφαρμόσουμε κινούμενα σχέδια στα στοιχεία. Λοιπόν, ας ξεκινήσουμε!
Τι είναι τα βασικά καρέ CSS Animation;
Για να ολοκληρώσουμε το animation, πρέπει να συνδέσουμε το animation στο στοιχείο HTML. Για το σκοπό αυτό, χρησιμοποιήστε τη λέξη-κλειδί ' @keyframes ' ακολουθούμενο από το όνομα του κινούμενου σχεδίου. Αυτό το στοιχείο καθορίζει την αρχή και το τέλος της κινούμενης εικόνας.
Πώς να ρυθμίσετε τα βασικά καρέ κινούμενων σχεδίων CSS;
Για να ρυθμίσετε τα βασικά καρέ κίνησης σε CSS, θα δούμε δύο παραδείγματα.
Παράδειγμα 1
Για τη ρύθμιση των βασικών καρέ κινούμενων εικόνων σε CSS, εκτελέστε τα ακόλουθα βήματα:
-
- Προσθέστε ένα με το όνομα της τάξης ' κύριος-διβ '.
- Μέσα στο div, προσθέστε ένα άλλο div με το όνομα της κλάσης ' img-peng '.
- Μέσα σε αυτό το img-peng div, προσθέστε
για να τοποθετήσετε την εικόνα. Αυτή η ετικέτα έχει τρία χαρακτηριστικά, το ' src ' χαρακτηριστικό για την παροχή της διαδρομής εικόνας, ' τα παντα ' είναι το εναλλακτικό κείμενο που προστίθεται εάν η εικόνα δεν εμφανίζεται και το ' πλάτος ” για να παρέχει το πλάτος της εικόνας.
HTML
< div τάξη = 'main-div' >
< div τάξη = 'img-peng' >
< img src = 'images/penguin.png' τα παντα = 'πιγκουίνος' πλάτος = '100' >
div >
div >
.main-div {
CSS
πλάτος: 90 % ;
ύψος: 90 px;
χρώμα φόντου: rgb ( 67 , 66 , 87 ) ;
περιθώριο: 20 px auto;
padding: 10px;
}
Στο CSS, το ' .main-div Προστίθεται για πρόσβαση στην κλάση div. Οι ιδιότητες που εφαρμόζονται σε αυτό εξηγούνται παρακάτω:-
- ' πλάτος Η τιμή της ιδιότητας ορίζει το πλάτος του div.
- ' ύψος 'η ιδιότητα χρησιμοποιείται για τον ορισμό του ύψους του div.
- ' χρώμα του φόντου Η ιδιότητα ' εφαρμόζει χρώμα στο φόντο του στοιχείου.
- ' περιθώριο Το ' έχει οριστεί ως ' αυτοκίνητο 20 px ”, που υποδεικνύει το διάστημα από πάνω και κάτω και το auto σημαίνει ίσος χώρος από αριστερά και δεξιά.
- ' υλικό παραγεμίσματος Η τιμή της ιδιότητας εκχωρείται ως 10 εικονοστοιχεία, η οποία εφαρμόζει χώρο γύρω από το περιεχόμενο του στοιχείου.
Μάθημα στυλ img-peng
.img-peng {
πλάτος: 50 px;
ύψος: 100 px;
θέση: σχετική;
κινούμενα σχέδια: κούνημα;
animation-διάρκεια: 2s;
animation-timing-function: 2s;
animation-itation-count: infinite;
}
Ο ' .img-peng ' χρησιμοποιείται για πρόσβαση στην κλάση div, που αναφέρεται στο παραπάνω αρχείο HTML. Αυτό το στοιχείο div έχει στυλ με ιδιότητες που συζητούνται παρακάτω:-
- ' πλάτος Η τιμή της ιδιότητας χρησιμοποιείται για τον ορισμό του πλάτους του στοιχείου.
- ' ύψος Η τιμή της ιδιότητας χρησιμοποιείται για τον καθορισμό του ύψους του στοιχείου.
- ' θέση 'η ιδιότητα αποδίδεται η τιμή' συγγενής ”, που σημαίνει ότι θα τοποθετηθεί σε σχέση με την κανονική του θέση.
- ' κινουμένων σχεδίων 'Το όνομα δίνεται ως ' σέικ '. Ωστόσο, μπορείτε να ονομάσετε κινούμενα σχέδια σύμφωνα με τις απαιτήσεις.
- ' animation-διάρκεια ” αντιπροσωπεύει τη διάρκεια της κινούμενης εικόνας, η οποία είναι 2 δευτερόλεπτα.
- ' animation-timing-function » εκχωρείται μια τιμή 2s που σημαίνει ότι σε 2 δευτερόλεπτα, η κινούμενη εικόνα ολοκληρώνεται.
- ' κινούμενη εικόνα-επανάληψη-μέτρηση ' έχει οριστεί ως άπειρο, πράγμα που σημαίνει ότι αυτή η κινούμενη εικόνα θα εμφανίζεται σε άπειρο χρόνο.
Ορισμός @keyframes Με λέξεις-κλειδιά προς και από
@ τα βασικά καρέ ανακινούνται {
από {
κορυφή: 50 px;
}
προς την {
margin-bottom: 200px;
}
}
Η περιγραφή των βασικών καρέ κινούμενων σχεδίων που έχουν οριστεί στην εικόνα παρατίθεται παρακάτω:-
- ' @keyframes κούνημα ” αναφέρεται στο κούνημα του ονόματος του κινούμενου σχεδίου ακολουθούμενο από τη λέξη-κλειδί @keyframes. Μέσα σε αυτόν τον κανόνα, καθορίζεται η συμπεριφορά της κινούμενης εικόνας.
- Μέσα στις σγουρές αγκύλες του, το ' από ' και ' προς την Οι λέξεις-κλειδιά καθορίζουν διαφορετικά διαστήματα για τον καθορισμό της συμπεριφοράς κινούμενων εικόνων.
- Ο ' μπλουζα ” στην ιδιότητα εκχωρείται η τιμή των 50 εικονοστοιχείων, που σημαίνει ότι η κινούμενη εικόνα ξεκινά από 50 εικονοστοιχεία από το επάνω μέρος της οθόνης και συνεχίζει στα 200 εικονοστοιχεία στο κάτω μέρος.
Ως αποτέλεσμα, θα δείτε την ακόλουθη έξοδο:
Τώρα, αφήστε το κινούμενο σχέδιο να συμπεριφέρεται διαφορετικά σε διαφορετικά διαστήματα. Για να το κάνετε αυτό, χρησιμοποιήστε τα ποσοστά κινούμενων εικόνων στα @keyframes.Καθορίστε @keyframes με ποσοστά
@ τα βασικά καρέ ανακινούνται {
0 % {
αριστερά: -50 εικονοστοιχεία ;
}
25 % {
αριστερά: 50 px;
}
πενήντα % {
αριστερά: -25 εικονοστοιχεία ;
}
75 % {
αριστερά: 25 px;
}
100 % {
αριστερά: 10 px;
}
}
Έτσι, η περιγραφή του παραπάνω αποσπάσματος κώδικα αναφέρεται εδώ:-
- Οι ποσοστιαίες τιμές 0%, 25%, 50%, 75% και 100% αντιπροσωπεύουν την κινούμενη εικόνα σε διαφορετικά διαστήματα.
- Επιπλέον, στο 0%, ο χώρος στα αριστερά της εικόνας θα είναι ' -50 εικονοστοιχεία '. Στο 25%, ο χώρος στα αριστερά θα είναι ' 50 εικονοστοιχεία '. Στο 50%, ο χώρος στα αριστερά θα είναι ' -25 εικονοστοιχεία '. Στο 75%, το αριστερό διάστημα θα είναι ' 25 εικονοστοιχεία ' και όταν ολοκληρωθεί η κινούμενη εικόνα (100%), το αριστερό διάστημα θα είναι ' 10 εικονοστοιχεία '.
Ο παραπάνω κώδικας εμφανίζει την ακόλουθη κίνηση:
Ας πάρουμε ένα άλλο παράδειγμα για να δούμε πώς μπορούμε να ορίσουμε κινούμενα σχέδια στις εικόνες.Παράδειγμα 2
Σε HTML, προσθέστε ένα
με το όνομα κλάσης ' κύρια σελίδα '. Μέσα σε αυτό το στοιχείο, τοποθετήστε δύο ακόμη ετικέτες div με κλάσεις ' σύννεφο 1 ' και ' σύννεφο2 », αντίστοιχα.HTML
< div τάξη = 'κύρια σελίδα' >
< div τάξη = 'σύννεφο 1' div >
< div τάξη = 'σύννεφο 2' div >
div >
σώμα {
CSS
περιθώριο: 0 ;
υλικό παραγεμίσματος: 0 ;
}
Στο CSS, θα εκχωρήσουμε τις ακόλουθες ιδιότητες CSS στο στοιχείο σώματος:-
- ' περιθώριο Η ιδιότητα ως 0 δεν καθορίζει χώρο γύρω από το στοιχείο.
- ' υλικό παραγεμίσματος Η ιδιότητα με την τιμή 0 δεν καθορίζει χώρο γύρω από το περιεχόμενο του στοιχείου.
Στυλ κύρια σελίδα div
.κύρια σελίδα {
φόντο-εικόνα: url ( / εικόνες / wolf-night.png ) ;
background-repeat: no-repeat;
Μέγεθος φόντου: εξώφυλλο;
Ύψος: 100vh;
θέση: σχετική;
υπερχείλιση: κρυφό;
}
Εδώ:-
- ' .κύρια σελίδα ' χρησιμοποιείται για πρόσβαση στην κλάση div.
- ' εικόνα φόντου 'η ιδιότητα αποδίδεται η τιμή' url(/images/wolf-night.png) ” όπου εικόνες είναι ο φάκελος που περιέχει την εικόνα wolf-night.png.
- ' φόντο-επανάληψη 'η ιδιότητα αποδίδεται η τιμή' χωρίς επανάληψη , που σημαίνει ότι η εικόνα θα εμφανιστεί μία φορά.
- ' μέγεθος φόντου Το ' έχει οριστεί ως ' κάλυμμα ” για να γεμίσετε ολόκληρο το στοιχείο div.
- ' ύψος ” είναι 100vh που είναι το 100% του ύψους της θύρας προβολής.
- ' θέση ' ως σχετικός ορίζει τη θέση της εικόνας σε σχέση με την τρέχουσα θέση της.
- ' ξεχείλισμα Η τιμή της ιδιότητας ορίζεται ως κρυφή για να αποκρύψει το τμήμα της εικόνας που είναι πολύ μεγάλο για να χωρέσει στο κοντέινερ.
Style cloud1 class
.σύννεφο1 {
φόντο-εικόνα: url ( / εικόνες / cloud.png ) ;
Μέγεθος φόντου: περιέχει;
background-repeat: no-repeat;
θέση: απόλυτη;
κορυφή: 100 px;
πλάτος: 500 px;
ύψος: 300 px;
animation: cloudanimation1;
animation-διάρκεια: 70s;
animation-itation-count: infinite;
}
Η κλάση div cloud1 εφαρμόζεται με τις ακόλουθες επεξηγημένες ιδιότητες:-
- ' .σύννεφο1 ' χρησιμοποιείται για την πρόσβαση στο σύννεφο κλάσης div1.
- ' εικόνα φόντου Η ιδιότητα ” ορίζεται ως url(/images/cloud.png), όπου οι εικόνες είναι ο φάκελος που περιέχει την εικόνα cloud.png.
- ' μέγεθος φόντου “με την τιμή” περιέχω ” εξασφαλίζει την ορατότητα της εικόνας.
- ' φόντο-επανάληψη ' ιδιοκτησία με την τιμή που έχει οριστεί ως ' χωρίς επανάληψη ” εμφανίζει την εικόνα ως μη επαναλαμβανόμενη.
- ' θέση ' ως απόλυτο τοποθετεί την εικόνα σε σχέση με το στοιχείο του γονέα της.
- ' μπλουζα Η ιδιότητα ' θέτει την εικόνα στα 100 px από την κορυφή.
- ' πλάτος Η ιδιότητα ' χρησιμοποιείται για τη ρύθμιση του πλάτους του στοιχείου div στα 500 px.
- ' ύψος Η ιδιότητα ' χρησιμοποιείται για τη ρύθμιση του ύψους του στοιχείου div στα 300 px.
- ' κινουμένων σχεδίων ” έχει εκχωρηθεί το όνομα cloudanimation1.
- ' animation-διάρκεια ” αντιπροσωπεύει τη διάρκεια της κινούμενης εικόνας, η οποία είναι 70 δευτερόλεπτα.
- ' κινούμενη εικόνα-επανάληψη-μέτρηση ” εκχωρείται η τιμή infinite, η οποία θα επαναλάβει το animation άπειρες φορές.
Μέχρι στιγμής, έχουμε εφαρμόσει τις ιδιότητες CSS στην κύρια σελίδα της κλάσης div και στο cloud1. Τώρα, στην επόμενη ενότητα, θα διαμορφώσουμε την επόμενη κλάση div που ονομάζεται cloud2.
Style cloud2 class
.σύννεφο2 {
φόντο-εικόνα: url ( / εικόνες / cloud.png ) ;
Μέγεθος φόντου: περιέχει;
background-repeat: no-repeat;
θέση: απόλυτη;
κορυφή: 50 px;
πλάτος: 200 px;
ύψος: 300 px;
animation: cloudanimation2;
animation-διάρκεια: 15s;
animation-itation-count: infinite;
}
Η κλάση div cloud2 εφαρμόζεται με τις ιδιότητες που εξηγούνται παρακάτω:-
- ' .σύννεφο2 ' χρησιμοποιείται για πρόσβαση στην κλάση cloud2.
- ' εικόνα φόντου Η ιδιότητα ” ορίζεται ως url(/images/cloud.png), όπου η εικόνα είναι ένας φάκελος που περιέχει την εικόνα cloud.png.
- ' μέγεθος φόντου ” περιέχει μια τιμή που διασφαλίζει την ορατότητα της εικόνας.
- ' φόντο-επανάληψη Η ιδιότητα με την τιμή που έχει οριστεί ως μη επανάληψη εμφανίζει την εικόνα ως μη επανάληψη.
- ' θέση ' ως απόλυτο τοποθετεί την εικόνα σε σχέση με το στοιχείο του γονέα της.
- ' μπλουζα Η ιδιότητα ' θέτει την εικόνα στα 100 px από την κορυφή.
- ' πλάτος Η ιδιότητα ' χρησιμοποιείται για τον ορισμό του πλάτους του στοιχείου div.
- ' ύψος Η ιδιότητα ” χρησιμοποιείται για τον ορισμό του ύψους του στοιχείου div.
- ' κινουμένων σχεδίων ” έχει εκχωρηθεί το όνομα cloudanimation2.
- ' animation-διάρκεια ” αντιπροσωπεύει τη διάρκεια της κινούμενης εικόνας.
- ' κινούμενη εικόνα-επανάληψη-μέτρηση ” εκχωρείται η τιμή infinite, η οποία θα επαναλάβει το animation άπειρες φορές.
Καθορίστε @keyframes για cloudanimation1
@ βασικά καρέ cloud animation1 {
προς την {
αριστερά: 0px;
}
από {
αριστερά: 100 % ;
}
}
Το cloud1 div είναι συνδεδεμένο με κινούμενα σχέδια που περιγράφονται παρακάτω:-
- ' @keyframes cloudanimation1 ” το όνομα του animation cloudanimation1 ακολουθείται από τη λέξη-κλειδί @keyframes που χρησιμοποιείται για τον καθορισμό της μετάβασης.
- Η λέξη-κλειδί @keyframes καθορίζει τον τρόπο με τον οποίο γίνεται η κίνηση από την αρχή μέχρι το τέλος στις εικόνες του cloud.
- Ο ' προς την ' και ' από Οι λέξεις-κλειδιά καθορίζουν ότι το cloud1 θα μετακινηθεί από το 100% στο 0px της οθόνης.
Καθορίστε @keyframes για cloudanimation2
@ βασικά καρέ cloud animation2 {
0 % {
αριστερά: 0 % ;
}
100 % {
αριστερά: 100 % ;
}
}
Η κλάση div cloud2 σχετίζεται με την κινούμενη εικόνα που εξηγείται παρακάτω:-
- ' @keyframes cloudanimation2 ” αντιπροσωπεύει το όνομα του κινούμενου σχεδίου cloudanimation2 ακολουθούμενο από τη λέξη-κλειδί @keyframes που χρησιμοποιείται για τον καθορισμό κινούμενων εικόνων.
- Ο ' 0% ' και ' 100% ” αντιπροσωπεύουν την αρχή και το τέλος της κινούμενης εικόνας.
- Στο 0% της κινούμενης εικόνας, το σύννεφο θα είναι στα αριστερά με την τιμή να έχει οριστεί ως 0%, και σταδιακά θα μετακινηθεί στο 100% του πλάτους.
Παραγωγή
Αυτό είναι ωραίο! Έχουμε συζητήσει πώς μπορούμε να καθορίσουμε κινούμενα σχέδια στα στοιχεία χρησιμοποιώντας τη λέξη-κλειδί @keyframes με επιτυχία.συμπέρασμα
Το CSS μας επιτρέπει να εφαρμόζουμε στυλ σε στοιχεία HTML. Το κινούμενο σχέδιο στο CSS εκτελεί μεταβάσεις από το ένα στυλ στο άλλο. Αποτελείται από δύο στοιχεία, τα στυλ κινούμενων εικόνων και τα βασικά καρέ. Τα στυλ κινούμενων εικόνων αντιπροσωπεύουν διαφορετικές ιδιότητες, όπως το όνομά τους, κινούμενη εικόνα-διάρκεια, κινούμενη εικόνα-επανάληψη-πλήθος και πολλά άλλα. Ενώ το στοιχείο του βασικού καρέ ορίζει την αρχή και το τέλος της κινούμενης εικόνας. Αυτός ο οδηγός αναλύει τον τρόπο ρύθμισης βασικών καρέ κινούμενων εικόνων με παραδείγματα.
- Προσθέστε ένα