Το κινούμενο σχέδιο CSS λειτουργεί. Χρήση διαφορετικών τύπων κινούμενων εικόνων

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

CSS 3D σύννεφα

Σε αυτό το demo θα μπορείτε να δημιουργείτε και να επεξεργάζεστε φανταχτερά σύννεφα σε 3D. Αυτά τα σύννεφα CSS μας καθιστούν σαφές ότι οι δυνατότητες των τεχνολογιών Ιστού είναι σχεδόν απεριόριστες.

Καθαρά λογότυπα CSS

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

Αλφάβητο με κινούμενα σχέδια CSS

Εξαιρετικό και καλλιτεχνικό παράδειγμα χρησιμοποιώντας CSSσε αλφάβητο

Τρισδιάστατη πλοήγηση για τον ιστότοπο

Μια απλή αλλά πολύ κομψή γραμμή πλοήγησης για τον ιστότοπο, φυσικά κατασκευασμένη μόνο με CSS3. χωρίς εικόνες ή σενάρια.

Google Doodle με CSS

Ένα από τα πολλά doodle από μηχανή αναζήτησης Google, κατασκευασμένο σε CSS. Αυτό είναι ένα εξαιρετικό παράδειγμα καλής χρήσης κινούμενων εικόνων CSS.

Ολισθητής

Ένα καλοφτιαγμένο και υψηλής ποιότητας ρυθμιστικό εικόνας. Συν 4 παραδείγματα στο demo.

Διπλό κινούμενο δαχτυλίδι

Ένα όμορφο κινούμενο και πολύχρωμο δαχτυλίδι με όχι πολύ κώδικα CSS

Θάμπωμα στο CSS

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

Ο πλήρης οδηγός για το Flexbox

Αυτό το άρθρο αφορά τα αποκριτικά μπλοκ Flexbox. Μιλάει εντελώς για αυτά τα μπλοκ, αν και το άρθρο είναι στα αγγλικά.

Πολύχρωμο και κινούμενο μενού με χρήση CSS3

Ένα όμορφο αναπτυσσόμενο μενού για έναν ιστότοπο με εικονίδια. Ένα τεράστιο πλεονέκτημα είναι ότι είναι κατασκευασμένο εξ ολοκλήρου σε CSS.

Φίλτρα CSS

Υλικό υψηλής ποιότητας στα αγγλικά που μιλάει χρησιμοποιώντας CSSφίλτρα σε εικόνες.

Φόρμες CSS

Δημοσίευση για Φόρμες CSSμε πολλά παραδείγματα

Γραμμές προόδου στο CSS

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

Κινούμενα σχέδια - Animate.css

Το πιο δημοφιλές έργο κινουμένων σχεδίων CSS στο Διαδίκτυο σήμερα. Και ίσως το πιο απλό και ποιοτικό, και επίσης δωρεάν.

Ενδείξεις φόρτωσης - Spinkit

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

Κουμπιά

Σήμερα είναι δύσκολο να εκπλήξεις με τα κουμπιά CSS, αλλά αυτή είναι μια αρκετά αξιοπρεπής επιλογή

Γεννήτρια για τη δημιουργία διακοπτών

Μικρές και υψηλής ποιότητας internetμια εφαρμογή με την οποία μπορείτε να δημιουργήσετε όμορφους διακόπτες για χρήση στον ιστότοπο.

Συμβουλές εργαλείων

Βιβλιοθήκη CSS για δωρεάν συμβουλές εργαλείων - Hint.css

Σχέδια χρωμάτων

Σχέδια χρωμάτων για άτομα που δεν τους αρέσει να εμβαθύνουν στον κώδικα

Αποτέλεσμα αυτό το μάθημαλειτουργεί μέσα Προγράμματα περιήγησης Safari, Chrome, Opera, Firefox, ξεκινώντας από την έκδοση 4 (όπου θα δείτε μετασχηματισμούς, αλλά χωρίς κινούμενα σχέδια). Επίσης, χρησιμοποιώντας το πρόθεμα του προγράμματος περιήγησης -ms-, μπορείτε να δείτε θετικό αποτέλεσμασε IE, ξεκινώντας από την έκδοση 9.

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

Για να λειτουργήσουν οι μετασχηματισμοί σε Firefox και Opera, απλώς αντικαταστήστε το πρόθεμα -webkit με -moz και -o. Για IE - σε -ms.

1. Εισαγωγή στους μετασχηματισμούς CSS

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

Στο παρακάτω παράδειγμα, τοποθετήσαμε 4 απολύτως πανομοιότυπα div με περίγραμμα 2 px. Για να μετατρέψετε αυτά τα στοιχεία σε προγράμματα περιήγησης που εκτελούνται στο webkit, προσθέστε το πρόθεμα -webkit-transform:

Χωρίς αυτούς τους μετασχηματισμούς, τα div θα φαίνονται ακριβώς τα ίδια.

2. Κινούμενα σχέδια

Για να κάνετε κίνηση μετασχηματισμών σε προγράμματα περιήγησης Webkit, μπορείτε να χρησιμοποιήσετε το πρόθεμα -webkit-transition. Το demo φαίνεται παρακάτω:

Υπάρχουν 4 πανομοιότυπα div μπροστά σας. Για να ξεκινήσετε το animation πρέπει να μετακινήσετε το ποντίκι μέσα/έξω. Με όλα αυτά, δεν υπάρχει JavaScript. Μόνο HTML και CSS.

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

Και πάλι, χρησιμοποιούμε μόνο HTML και CSS. ΣΕ σε αυτή την περίπτωση, αλλάξτε τις ρυθμίσεις περίγραμμα-χρώμα, περίγραμμα-ακτίνα.

4. Πολλαπλοί μετασχηματισμοί σε ένα στοιχείο

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

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

4. Κινούμενα σχέδια σε δράση

Εδώ είναι άλλο ένα ενδιαφέρον παράδειγμασυνδυάζοντας διάφορους τύπους μετασχηματισμών σε ένα κινούμενο σχέδιο:

Αυτό το παράδειγμα μπορεί να μην λειτουργεί πολύ καλά στο Safari 3 και προηγούμενες εκδόσειςΟπερα.

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

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

5. Χρήση διαφορετικών τύπων κινούμενων εικόνων

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

Όταν συμβεί ένα συμβάν:hover, το μπλε τετράγωνο θα αλλάξει, θα αλλάξει χρώμα σε κόκκινο και θα μετακινηθεί από την επάνω αριστερή γωνία στην κάτω δεξιά.

Το πρώτο πράγμα που μάλλον θα έπρεπε να προσέξετε είναι η ιδιαιτερότητα της κίνησης της πλατείας. Τώρα δεν είναι αιχμηρό, αλλά πιο «κυρτό». Όλα αυτά χάρη στις λειτουργίες ease-out και ease-in.

Σημειώστε επίσης ότι η αλλαγή χρώματος συμβαίνει πριν από την περιστροφή.

Το κόλπο είναι ότι μπορείτε να χωρίσετε το -webkit-transition σε πολλαπλές καταχωρήσεις:

#block ( ... φόντο: μπλε; ... -webkit-transition-property: αριστερά, επάνω, φόντο, -webkit-transform; -webkit-transition-duration: 2s, 2s, 1s, 1s; -webkit-transition -Timing-function: ease-out, ease-in, linear, ease-in-out -webkit-transition-delay: 0, 0, 0, 1s ... ) #stage:hover #block (αριστερά: 100px ; top: 100px: κόκκινο -webkit-transform: rotate(360deg);

6. Το γεγονός ενός στοιχείου μεταμορφώνει ένα άλλο

Πολλοί άνθρωποι πιθανότατα θα ενδιαφέρονται για παρόμοια λειτουργικότητα: κάνοντας κλικ σε ένα στοιχείο προκαλεί τη μετατροπή ενός άλλου. Στο CSS, αυτό μπορεί να επιτευχθεί χρησιμοποιώντας τους επιλογείς >, + και ~.

Ακολουθεί ένα σχετικό παράδειγμα:

Σε αυτό το παράδειγμα, χρησιμοποιήσαμε το σύμβολο + για να αλληλεπιδράσουμε με τα #box1 και #box2. Το ~ μπορεί να χρησιμοποιηθεί για πρόσβαση σε στοιχεία που βρίσκονται κάπου μακριά από το στοιχείο που περιμένει το συμβάν.

#box2 ( θέση: απόλυτη; αριστερά: 120 εικονοστοιχεία; ... φόντο: μπλε; ... ) #box1:hover + #box2 ( -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg) -ms-transform: rotate(360deg);

Ταυτόχρονα, μπορούμε να κάνουμε κίνηση στο πρώτο μπλοκ:

Το μόνο μειονέκτημα αυτών των παραδειγμάτων είναι ότι δεν λειτουργούν (ή λειτουργούν στραβά) σε προηγούμενες εκδόσεις προγραμμάτων περιήγησης.

Ευχαριστώ τον Niall για το προτεινόμενο σεμινάριο!

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

Η μετακίνηση μπορεί να είναι λίγο τρελή, όπως αυτό:

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

Το πρόγραμμα περιήγησής σας δεν υποστηρίζει ενσωματωμένα πλαίσια ή έχει ρυθμιστεί αυτήν τη στιγμή να μην υποστηρίζει ενσωματωμένη εμφάνισηπλαίσια.

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

Μετασχηματισμός με translate3d()

Όταν μετακινείτε ένα στοιχείο, η κάθετη και η οριζόντια θέση του αλλάζουν. Υπάρχουν αρκετές Ιδιότητες CSS, τα οποία χρησιμοποιούνται για αυτό. Αλλά θέλω να σας προτείνω να χρησιμοποιήσετε τη λειτουργία translate3d μετασχηματίζουν ιδιότητεςαντί για το συνηθισμένο περιθώριο , padding , αριστερά , επάνω γιατί παρέχει πιο ομαλή κίνηση.

Η συνάρτηση translate3d παίρνει τρία ορίσματα, αλλά πρώτα ας δούμε αυτά που είναι υπεύθυνα για τη μετακίνηση περιεχομένου οριζόντια και κάθετα:

Το όρισμα X καθορίζει οριζόντια κίνηση, Y - κάθετη κίνηση. Για παράδειγμα, εάν θέλετε να μετακινήσετε περιεχόμενο 20 pixel προς τα δεξιά και προς τα πάνω, η συνάρτηση translate3d θα πρέπει να μοιάζει με αυτό:

Foo (μετασχηματισμός: translate3d(20px, 20px, 0px); )

Δεν θα εξετάσουμε το τρίτο όρισμα, το οποίο καθορίζει την κίνηση κατά μήκος του άξονα Z. Επειδή μας ενδιαφέρουν τα εφέ CSS 2d-hover.

Όπως μπορείτε να δείτε, η λειτουργία translate3d δεν είναι ιδιαίτερα περίπλοκη. Στη συνέχεια θα δούμε πώς να το χρησιμοποιήσετε σε κινούμενα σχέδια CSS για να δημιουργήσετε κίνηση.

Μετάβαση

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

ImageContainer img (θέση: σχετική, επάνω: 0 εικονοστοιχεία, μετάβαση: μετασχηματισμός .2s ease-in-out; )

Αφού ορίσετε μια μετάβαση, μπορείτε να ορίσετε την ιδιότητα μετασχηματισμού με τη συνάρτηση translate3d:

PictureContainer img:hover (μετασχηματισμός: translate3d(0px, -150px, 0px); )

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

Εμψύχωση

Σε περίπτωση κινούμενης εικόνας, βεβαιωθείτε ότι τα βασικά καρέ στο @keyframes περιέχουν μια ιδιότητα μετασχηματισμού με translate3d:

@keyframes bobble ( 0% ( μετασχηματισμός: translate3d(50px, 40px, 0px); animation-timing-function: ease-in; ) 50% (translate: translate3d(50px, 50px, 0px); animation-timing-function: ease -out; ) 100% (μετασχηματισμός: translate3d(50px, 40px, 0px); )

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

Μην ξεχνάτε τα προθέματα

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

Μεταβάσεις με JavaScript

Μπορείτε επίσης να δημιουργήσετε κινούμενα κινούμενα σχέδια σε JavaScript. Οι ίδιοι κανόνες ισχύουν και εδώ. Πρώτα πρέπει να ορίσετε τη θέση χρησιμοποιώντας το transform translate3d, αλλά στο JavaScript αυτό είναι λίγο πιο περίπλοκο.

Το απόσπασμα κώδικα που απαιτείται για αυτό μοιάζει με αυτό:

συνάρτηση getSupportedPropertyName(properties) ( for (var i = 0; i< properties.length; i++) { if (typeof document.body.style] != "undefined") { return properties[i]; } } return null; } var transform = ["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"]; var item = document.querySelector("#theItem"); var transformProperty = getSupportedPropertyName(transform); if (transformProperty) { item.style = translate3d(someValueX, someValueY, 0px); }

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

Γιατί δεν μας βοηθά να ορίσουμε τη θέση χρησιμοποιώντας περιθώριο , επάνω , αριστερά , κ.λπ.;

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

Περιττοί υπολογισμοί

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

Μπορείτε να ορίσετε τη θέση του στοιχείου που μετακινείτε σε σταθερή ή απόλυτη. Αυτό θα γλιτώσει το πρόγραμμα περιήγησης από τον υπολογισμό της διάταξης για ολόκληρο το έγγραφο. Αλλά σε αυτήν την περίπτωση, το πρόγραμμα περιήγησης εξακολουθεί να εκτελεί υπολογισμούς στο στοιχείο που κινείται. Και το αποτέλεσμα της χρήσης του translate3d δεν θα είναι απαραίτητα ταυτόσημο με το αποτέλεσμα που προκύπτει χρησιμοποιώντας περιθώριο, padding κ.λπ. Επιπλέον, όπως θα δείτε στο επόμενη ενότητα, δεν θα είναι 100% πανομοιότυπα.

Επιτάχυνση υλικού

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

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

Πώς να διασφαλίσετε ότι το κινούμενο σχέδιο είναι μέσα επιτάχυνση υλικούχρησιμοποίησες GPU; Εφαρμόστε το translate3d! Όταν μετασχηματίζετε ένα στοιχείο χρησιμοποιώντας το translate3d, υποβάλλεται σε επεξεργασία μέσω της GPU σε προγράμματα περιήγησης Webkit όπως το Chrome και το Safari ( που είναι εγκατεστημένα σε iPhone και iPad), V Internet Explorer 9/10 και επίσης μέσα πιο πρόσφατες εκδόσεις Firefox. Αυτό δίνει στο translate3d σαφή πλεονεκτήματα.

Τι γίνεται με το JavaScript;

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

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

Ο Θεός να ευλογεί τη μεταμόρφωση!

Ο λόγος που ο μετασχηματισμός είναι πιο αποτελεσματικός είναι επειδή δεν επηρεάζει άλλα στοιχεία. Τυχόν ενέργειες που εκτελείτε ισχύουν για ένα μόνο στοιχείο και το πρόγραμμα περιήγησης δεν χρειάζεται να δημιουργήσει ξανά ολόκληρο το παράθυρο. Τροποποιεί μόνο το τμήμα της οθόνης που περιέχει το κινούμενο περιεχόμενο. Αυτό δεν εξαρτάται από το εάν η GPU εμπλέκεται ή όχι.

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

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

Αλλάξτε ομαλά το χρώμα ενός στοιχείου κατά την τοποθέτηση του ποντικιού χρησιμοποιώντας τη μετάβαση

#πλαίσιο 1 (
margin-bottom: 5px;
χρώμα φόντου: #ccc;

padding: 10px;
text-align: κέντρο;
πλάτος: 200 px;
ύψος: 100 px;

κείμενο-εσοχή: 0px;
περίγραμμα: 1px στερεό #888;
-moz-transition: φόντο-χρώμα 0,8s 0,1s ευκολία.
-o-transition: φόντο-χρώμα 0,8s 0,1s ευκολία.
-webkit-transition: φόντο-χρώμα 0,8s 0,1s ευκολία.
δρομέας: δείκτης;)

#κουτί 1 :φτερουγίζω {
χρώμα φόντου: #97CE68;
χρώμα: #333;
}

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

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

Αλλαγή μεγέθους στοιχείου

#κουτί 2 (
margin-bottom: 5px;
χρώμα φόντου: #ccc;
χρώμα: #333;

padding: 10px;
text-align: κέντρο;
πλάτος: 200 px;
ύψος: 100 px;

κείμενο-εσοχή: 0px;
περίγραμμα: 1px στερεό #888;
-moz-transition: όλα τα 1s γραμμικά.
-o-transition: όλα τα 1s γραμμικά.
-webkit-transition: όλα τα 1s γραμμικά.
δρομέας: δείκτης;)

#κουτί 2 :φτερουγίζω {
χρώμα φόντου: #97CE68;
χρώμα: #000;
πλάτος: 150 px;
ύψος: 50 px;
}

Σε αυτό το παράδειγμα, πετύχαμε μια ομαλή αλλαγή στο μέγεθος του μπλοκ κατά την αιώρηση. Η τυπική τιμή είναι 200 ​​επί 100 και η τιμή αιώρησης είναι 150 επί 50, η οποία καθορίζεται από το χαρακτηριστικό :φτερουγίζω.

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

Μπορείτε επίσης να αλλάξετε το ρυθμό αλλαγής. Σε αυτή την περίπτωση είναι 1s.

Στρέψη αντικειμένου

# κουτί 3 (
margin-bottom: 5px;
χρώμα φόντου: #ccc;
χρώμα: #333;

padding: 10px;
text-align: κέντρο;
πλάτος: 200 px;
ύψος: 100 px;

κείμενο-εσοχή: 0px;
περίγραμμα: 1px στερεό #888;
-moz-transition: all 1s 0.1s ease-in.
-o-transition: all 1s 0.1s ease-in;
-webkit-transition: all 1s 0.1s ease-in.
δρομέας: δείκτης;)

#box3:hover (
χρώμα φόντου: #97CE68;
χρώμα: #000;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}

Η στρέψη συμβαίνει χρησιμοποιώντας μετασχηματίζωΚαι μετάβαση. Σε αυτήν την περίπτωση, το αντικείμενο περιστρέφεται δεξιόστροφα 360 μοίρες με ταχύτητα ενός δευτερολέπτου. Εάν θέλετε το μπλοκ να περιστρέφεται αριστερόστροφα, μετασχηματίζωΗ τιμή πρέπει να οριστεί σε - (μείον). Φυσικά, ο βαθμός περιστροφής μπορεί να αλλάξει.

Ομαλή μεγέθυνση και σμίκρυνση ενός αντικειμένου

# κουτί 4 (
margin-bottom: 5px;
χρώμα φόντου: #ccc;
χρώμα: #333;
padding: 10px;
text-align: κέντρο;
πλάτος: 200 px;
ύψος: 100 px;

κείμενο-εσοχή: 0px;
περίγραμμα: 1px στερεό #888;
-moz-transition: όλα τα 3s ease-out.
-o-transition: όλα τα 3s ease-out.
-webkit-transition: όλα τα 3s ease-out.
δρομέας: δείκτης;)

#box4:hover (
χρώμα φόντου: #97CE68;
χρώμα: #000;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: κλίμακα(2);
}

Σε αυτό το παράδειγμα, το μπλοκ αυξάνεται ομαλά σε μέγεθος κατά 2 φορές. Αυτή η τιμή έχει οριστεί μετασχηματισμός: κλίμακα (2). Εάν ορίσετε την τιμή σε 1,5, το μπλοκ θα μεγεθύνεται κατά 1,5 φορές.

Με τον ίδιο τρόπο μπορείτε μειώστε το μέγεθοςμπλοκ, για παράδειγμα ορίστε την τιμή σε 0,5.

Ομαλή μετατόπιση μπλοκ προς τα κάτω

# κουτί 5 (
margin-bottom: 5px;
χρώμα φόντου: #ccc;
χρώμα: #333;
padding: 10px;
text-align: κέντρο;
πλάτος: 200 px;
ύψος: 100 px;

κείμενο-εσοχή: 0px;
περίγραμμα: 1px στερεό #888;
-moz-transition: όλα τα 1s ease-in-out.
-o-transition: όλα τα 1s ease-in-out.
-webkit-transition: όλα τα 1s ease-in-out.
δρομέας: δείκτης;)

#box5:hover (
χρώμα φόντου: #97CE68;
χρώμα: #000;
-webkit-transform: translate(0,50px);
-moz-transform: translate(0,50px);
-o-transform: translate(0,50px);
}

Εδώ η κίνηση καθορίζεται σε pixel. Σε αυτήν την περίπτωση (0,50 px). Μπορείτε επίσης να κάνετε το μπλοκ να ανέβει με αυτήν την τιμή 0,-50 px. Ή διαγώνια προς τα κάτω 50 px, 50 px. Με μια λέξη, το μπλοκ μπορεί να γίνει για να μετακινηθεί οπουδήποτε.

Βασικά αυτό ήθελα να πω. Όχι, όχι όλα :-) Ξέχασα να σας υπενθυμίσω ότι αυτό το κινούμενο σχέδιο CSS μπορεί να εφαρμοστεί σε οποιαδήποτε αντικείμενα στον ιστότοπο: εικόνες, κείμενο, επικεφαλίδες, εικονίδια κ.λπ. Για συνδέσμους, μια ομαλή αλλαγή χρώματος είναι τέλεια κατά τη γνώμη μου, είναι πολύ όμορφη. :-)

Και επίσης, αυτές οι πληροφορίες κοινοποιήθηκαν μαζί μας από τον ιστότοπο shpargalkablog.ru. Για το οποίο τον ευχαριστώ πολύ.

Αυτό είναι σίγουρο τώρα :-) Τα λέμε σύντομα, φίλοι.

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

1. Βασικές ιδιότητες των κινούμενων εικόνων CSS3

Ένα μικρό θεωρητικό μπλοκ από το οποίο θα καταλάβετε ποιες ιδιότητες CSS3 είναι υπεύθυνες για το animation, καθώς και ποιες τιμές μπορούν να λάβουν.

• animation-name — μοναδικό όνομακινούμενα σχέδια (βασικά καρέ, θα μιλήσουμε για αυτά λίγο αργότερα).
• animation-διάρκεια— διάρκεια κινουμένων σχεδίων σε δευτερόλεπτα.
• animation-timing-function— καμπύλη αλλαγής ταχύτητας κινουμένων σχεδίων. Με την πρώτη ματιά είναι πολύ ασαφές. Είναι πάντα πιο εύκολο να το δείξετε με ένα παράδειγμα και θα τα δείτε παρακάτω. Μπορεί να λάβει τις ακόλουθες τιμές: γραμμικό | ευκολία | ευκολία | ευκολία | cubic-bezier(n,n,n,n) .
• animation-καθυστέρηση— καθυστέρηση σε δευτερόλεπτα πριν από την έναρξη της κινούμενης εικόνας.
• κινούμενη εικόνα-επανάληψη-μέτρηση— αριθμός επαναλήψεων κινουμένων σχεδίων. Μπορεί να καθοριστεί είτε απλά ως αριθμός, είτε μπορείτε να ορίσετε άπειρο και το animation θα τρέχει ατελείωτα.

Εδώ είναι μόνο οι βασικές ιδιότητες, οι οποίες είναι υπεραρκετές για να δημιουργήσετε το πρώτο σας CSS3 animation.

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

Πάνω ορίζουμε το πρώτο και το τελευταίο καρέ. Όλες οι ενδιάμεσες καταστάσεις θα υπολογίζονται ΑΥΤΟΜΑΤΑ!

2. Παράδειγμα πραγματικού κινουμένου σχεδίου CSS3

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

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

Εδώ είναι τι θα κάνουμε για παράδειγμα:ας έχουμε κάποιου είδους μπλοκ