. Η σελίδα εισάγει επίσης ένα αρχείο CSS με το όνομα style.css:
<!DOCTYPE html>
Για να δημιουργήσετε στυλ και στα δύο στοιχεία, δημιουργήστε ένα αρχείο style.css στον ίδιο φάκελο με το HTML και προσθέστε τα εξής:
#box {button {
button:hover {
@keyframes rotateAndChangeColor {
Αυτά τα στυλ δημιουργούν δύο στοιχεία:
Ένα απλό πλαίσιο που περιστρέφεται και αλλάζει χρώμα όταν φορτώνεται η σελίδα.
Ένα κουμπί που αλλάζει το χρώμα του φόντου του όταν τοποθετείτε το δείκτη του ποντικιού πάνω του.
Σημειώστε ότι το κόκκινο πλαίσιο ενεργοποιείται χρησιμοποιώντας την οδηγία CSS @keyframe, ενώ το κουμπί χρησιμοποιεί μια μετάβαση. Αυτό σας επιτρέπει να συγκρίνετε τις δύο προσεγγίσεις χρησιμοποιώντας τα DevTools του προγράμματος περιήγησης.
Για πρόσβαση στην καρτέλα Κινούμενα σχέδια στο Chrome DevTools:
Κάντε δεξί κλικ στη σελίδα σας για να εμφανιστεί το μενού περιβάλλοντος.
Κάντε κλικ στο Inspect.
Κάντε κλικ στις τριπλές κουκκίδες στην επάνω δεξιά γωνία.
Μεταβείτε στην επιλογή Περισσότερα εργαλεία > Κινούμενα σχέδια.
Αυτό θα ανοίξει το συρτάρι κινούμενων σχεδίων στο κάτω τμήμα.
Τυχόν κινούμενες εικόνες που εμφανίζονται στη σελίδα σας θα εμφανίζονται εδώ. Εάν ανανεώσετε τη σελίδα σας και τοποθετήσετε το δείκτη του ποντικιού στο κουμπί, τα κινούμενα σχέδια θα εμφανιστούν κάτω από την καρτέλα κινούμενα σχέδια.
Η πραγματική δύναμη έρχεται όταν κάνετε κλικ σε ένα από αυτά τα κινούμενα σχέδια. Για παράδειγμα, εάν κάνετε κλικ στην κινούμενη εικόνα του πλαισίου, θα δείτε το πρόγραμμα περιήγησης να παρουσιάζει τα βασικά καρέ ως εξής:
Τα DevTools εμφανίζουν όλα τα κινούμενα σχέδια που σχετίζονται με το στοιχείο που επιλέγετε. Δεδομένου ότι υπάρχει μόνο ένα κινούμενο σχέδιο που έχει οριστεί για το κόκκινο πλαίσιο—rotateAndChangeColor—θα δείτε απλώς τις λεπτομέρειες του.
Μπορείτε να σύρετε τη γραμμή προς τα αριστερά για να κάνετε την κινούμενη εικόνα πολύ πιο γρήγορη ή να τη σύρετε προς τα δεξιά για να επιβραδύνετε την κινούμενη εικόνα. Μπορείτε επίσης να θέσετε σε παύση την κινούμενη εικόνα σε ορισμένα σημεία εναλλάσσοντας τα εικονίδια παύσης και αναπαραγωγής. Τα ποσοστά στην κορυφή σάς επιτρέπουν να αναπαράγετε το κινούμενο σχέδιο με το ένα τέταρτο της κανονικής του ταχύτητας και το ένα δέκατο της ταχύτητάς του αντίστοιχα.
Όταν επιθεωρείτε τη μετάβαση του κουμπιού, το DevTools θα εμφανίσει τις επιμέρους ιδιότητες της μετάβασης: το χρώμα και το χρώμα του φόντου.
Αυτό το εργαλείο σάς επιτρέπει να χειρίζεστε την κινούμενη εικόνα σας για να δείτε ακριβώς πώς λειτουργεί. Μπορείτε να το χρησιμοποιήσετε για να αντιμετωπίσετε προβλήματα στον ιστότοπό σας εάν υπάρχουν προβλήματα.
Ξεκινήστε αντικαθιστώντας τη σήμανση στην ετικέτα
HTML με την ακόλουθη σήμανση:
<div class="move-me move-me-1">steps(4, end)</div>
Στη συνέχεια, αντικαταστήστε όλα τα στυλ στο αρχείο style.css με αυτό:
.move-me {.move-me-1 {
.move-me-2 {
.move-me-3 {
body {
@keyframes move-in-steps {
100% {
Όλα τα στοιχεία
έχουν εφαρμοστεί το κινούμενο σχέδιο κίνησης σε βήματα, το οποίο αλλάζει τη θέση και το χρώμα του φόντου. Επιπλέον, κάθε κουτί έχει διαφορετική κινούμενη εικόνα για τον έλεγχο του αριθμού των βημάτων που θα κάνει.
Ενώ το τρίτο πλαίσιο ολισθαίνει σταθερά προς τα δεξιά, τα δύο πρώτα θα μετακινηθούν δύο βήματα τη φορά μέχρι να φτάσουν όλα στο τέλος της οθόνης (με το δεύτερο πλαίσιο να ξεκινά πριν από το πρώτο πλαίσιο).
Εάν ανοίξετε την καρτέλα Κινούμενα σχέδια στο DevTools και ανανεώσετε τη σελίδα, θα βρείτε όλες τις πληροφορίες που σχετίζονται με αυτά τα κινούμενα σχέδια:
Υπάρχουν πολλά στοιχεία που όλα ζωντανεύουν την ίδια περίοδο. Σε αυτό το σενάριο, το χρώμα φόντου και η θέση του πλαισίου κινούνται ταυτόχρονα και για τα τρία πλαίσια.
Ένα άλλο πράγμα που πρέπει να σημειωθεί είναι οι κόμβοι σε κάθε γραμμή κινούμενων σχεδίων. Όταν μια κινούμενη εικόνα εμφανίζεται άπειρες φορές, οι κόμβοι δείχνουν πού ξεκινά και που τελειώνει κάθε επανάληψη στο animation.
Οι κενοί κόμβοι είναι ουσιαστικά τα βασικά καρέ στο κινούμενο σχέδιο σας, ενώ τα συμπαγή, έγχρωμα αντιπροσωπεύουν την αρχή και το τέλος του κινούμενου σχεδίου. Θα έχετε σκουρόχρωμους κόμβους κάθε φορά που ξεκινά η κινούμενη εικόνα σας.
Τέλος, μπορείτε να επεξεργαστείτε τα κινούμενα σχέδια χρησιμοποιώντας τα DevTools, όπως μπορείτε με οποιαδήποτε ιδιότητα CSS. Όλες οι αλλαγές που κάνετε χρησιμοποιώντας το περιβάλλον εργασίας κινούμενων σχεδίων θα εμφανίζονται στα ενσωματωμένα στυλ κάτω από την καρτέλα Στυλ και αντίστροφα. Αυτό σας επιτρέπει να κάνετε αλλαγές, να τις δοκιμάσετε και να τις αντιγράψετε στο πραγματικό σας έργο.
Η λειτουργία DevTools του Google Chrome είναι ένα φοβερό εργαλείο για τον εντοπισμό σφαλμάτων του CSS σας, συμπεριλαμβανομένων των κινούμενων εικόνων. Παρέχει μια λεπτομερή προβολή κάθε μετάβασης και κινούμενης εικόνας στη σελίδα σας, ώστε να μπορείτε να βλέπετε ακριβώς τι συμβαίνει σε κάθε βήμα.
Ως προγραμματιστής ιστού, θα πρέπει να είστε εξοικειωμένοι με τη λειτουργία DevTools του προγράμματος περιήγησής σας ή την αντίστοιχη λειτουργία της.
