Πώς να παίξετε πολλά κινούμενα σχέδια CSS ταυτόχρονα;

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

Πώς να παίξετε πολλά κινούμενα σχέδια CSS ταυτόχρονα;

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

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

Βήμα 1: Δημιουργία Δομής

Αρχικά, δημιουργήστε ένα στοιχείο HTML στο οποίο οι κινούμενες εικόνες εφαρμόζονται στα επόμενα βήματα. Για παράδειγμα, η εικόνα πρόκειται να εισαχθεί:

Στο παραπάνω απόσπασμα κώδικα:

• Αρχικά, η διαδρομή εικόνας ορίζεται στο ' src ' Χαρακτηριστικό.
• Στη συνέχεια, η τιμή του ' 100 εικονοστοιχεία ' παρέχεται στις ιδιότητες 'πλάτος' και 'ύψος' CSS.
• Επίσης, ορίστε την τιμή του ' έμψυχος ' στο ' τάξη ' Χαρακτηριστικό.

Βήμα 2: Ρύθμιση κινούμενων εικόνων

Ο ' βασικά καρέ ” χρησιμοποιούνται για τη δημιουργία προσαρμοσμένων κινούμενων εικόνων σύμφωνα με τις ανάγκες της ιστοσελίδας. Για παράδειγμα, δημιουργούνται δύο κινούμενα σχέδια στο παρακάτω απόσπασμα κώδικα:

Στο παραπάνω απόσπασμα κώδικα:

• Πρώτον, το « @-webkit-keyframes «Ο μηχανισμός χρησιμοποιείται για τη ρύθμιση» γνέθω ' και ' γυρίζω ' με όνομα κινούμενα σχέδια.
• Στη συνέχεια, χρησιμοποιήστε το ' μεταμορφώνω « ακίνητο που έχει αξία « γυρίζω() ' στο ' γνέθω ” σώμα κινουμένων σχεδίων. Αυτή η συνάρτηση περιστρέφει το στοιχείο υπό γωνία ' 180 μοίρες '.
• Μετά από αυτό, ορίστε την κινούμενη εικόνα που μεγαλώνει ή επεκτείνει το αρχικό στοιχείο κατά έναν παράγοντα ' 1 'και στα δύο' Χ ' και ' ΚΑΙ 'άξονας στο' κλίμακα ” σώμα κινουμένων σχεδίων.

Βήμα 3: Εφαρμογή κινούμενων εικόνων σε στοιχεία HTML

Μέσα στο τμήμα CSS, επιλέξτε την κλάση ' έμψυχος ' που έχει ανατεθεί στο ' ετικέτα ” και παρέχετε τις ακόλουθες ιδιότητες CSS:

Περιγραφή των ιδιοτήτων που χρησιμοποιούνται στο παραπάνω μπλοκ κώδικα:

• Πρώτα, ορίστε την τιμή του ' απόλυτος 'στο CSS' θέση ” ιδιοκτησία. Ευθυγραμμίζει το « img ' στοιχείο σύμφωνα με το κινούμενο σχέδιο.
• Στη συνέχεια, δώστε τις τιμές του ' 60% », « 110 εικονοστοιχεία ' και ' 110 εικονοστοιχεία 'στο CSS' αριστερά », « πλάτος ' και ' ύψος ' ιδιότητες. Αυτές οι ιδιότητες χρησιμοποιούνται για τον καθορισμό της θέσης και του μεγέθους ενός στοιχείου.
• Μετά από αυτό, ορίστε την τιμή του ' κλίμακα 3s άπειρη γραμμική ' στο ' -webkit-animation ” Ιδιότητα CSS.
• Και το ' 3s 'είναι η διάρκεια αυτού του κινούμενου σχεδίου, το ' άπειρος ' είναι η διάρκεια της κινούμενης εικόνας και η ' γραμμικός ” είναι η σκηνοθεσία του animation.
• Στο τέλος, δώστε τις τιμές του ' spin 2s άπειρη γραμμική 'στο CSS' -webkit-animation ” ιδιοκτησία. Αυτή η ιδιότητα προσθέτει το δεύτερο κινούμενο σχέδιο με το όνομα ' γνέθω ' στο ' img ' στοιχείο.

Μετά τη μεταγλώττιση του παραπάνω μπλοκ κώδικα, το animation μοιάζει με αυτό:

Το παραπάνω gif δείχνει ότι μόνο ' γνέθω 'Το κινούμενο σχέδιο παίζει στο στοχευμένο στοιχείο.

Βήμα 4: Αναπαραγωγή πολλαπλών κινούμενων εικόνων σε στοιχεία HTML

Όπως και στο παραπάνω βήμα, έχει εφαρμοστεί μόνο μία κίνηση στο στοιχείο. Αυτό συμβαίνει επειδή έχουν εκχωρηθεί πολλές τιμές στο ίδιο ' -webkit-animation ” ιδιοκτησία.

Για να επιλύσετε αυτό το ζήτημα, τυλίξτε το στοιχείο προορισμού με ένα άλλο στοιχείο HTML. Καθώς το « div ' χρησιμοποιείται ήδη ως περιτύλιγμα στο πρώτο βήμα, επιλέξτε το ' σπιθαμή » και ενημερώστε τον κώδικα όπως:

Στον παραπάνω κώδικα:

• Στην αρχή, το « έμψυχος Η κλάση παραμένει η ίδια και αφαιρείται μόνο η δεύτερη κινούμενη εικόνα που τοποθετείται στο ' σπιθαμή ” τάξη.
• Μετά από αυτό, ορίστε τη θέση χρησιμοποιώντας το ' θέση ' και ' μπλουζα ' ιδιότητες.

Μετά την εκτέλεση του παραπάνω αποσπάσματος κώδικα, η ιστοσελίδα εμφανίζεται πλέον ως εξής:

Η έξοδος δείχνει ότι και οι δύο κινούμενες εικόνες έχουν εφαρμοστεί στο επιλεγμένο στοιχείο HTML ταυτόχρονα.

συμπέρασμα

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