Παράδειγμα Css του εφέ αιώρησης του ποντικιού. Πρωτότυπα εφέ αιώρησης για εικόνες που χρησιμοποιούν καθαρό CSS3
Η ανάρτηση περιέχει μια επιλογή από διάφορα εφέ CSS και κινούμενα σχέδια που μπορούν να είναι χρήσιμα στην εργασία σας και επίσης θα εξαλείψουν την ανάγκη να καταφεύγετε συνεχώς σε JavaScript. Τα παραδείγματα μπορεί να μην είναι τα νεότερα ή πιο ασυνήθιστα, αλλά κατά τη γνώμη μου είναι χρήσιμα.
1. Ρολόι CSS3 με jQuery
Αυτό το ρολόι δημιουργείται χρησιμοποιώντας ένα από τα κύρια εργαλεία CSS3 - περιστροφή και σύνδεση της βιβλιοθήκης JQuery.2. Αναλογικό ρολόι CSS
Πιο κλασικά, αναλογικά ρολόγια. Δημιουργούνται χρησιμοποιώντας μετάβαση webkit και την ιδιότητα μετασχηματισμού CSS. Για να ανταποκρίνεται όμως η ώρα στην τρέχουσα, χρειάζεστε JavaScript.
3. Περιστρεφόμενος κύβος 3D
Η περιστροφή και η κίνηση κατά μήκος των πλευρών του κύβου θα γίνουν χρησιμοποιώντας τα τυπικά πλήκτρα "πάνω", "κάτω", "αριστερά" και "δεξιά". Η ίδια η τρισδιάστατη φιγούρα έχει κατασκευαστεί χρησιμοποιώντας webkit-perspective, -webkit-transform και -webkit-transition.
4. Αρκετοί αναδιπλούμενοι τρισδιάστατοι κύβοι
Υπάρχουν ήδη αρκετοί τρισδιάστατοι κύβοι που παρουσιάζονται εδώ που χρησιμοποιούν απευθείας το CSS3 και τις ιδιότητες μετασχηματισμού και μετάβασης. Περνώντας το δείκτη του ποντικιού πάνω από τον κύβο, μετακινείται στο πλάι, αποκαλύπτοντας το κείμενο που βρίσκεται στην άλλη πλευρά του σχήματος.
5. Μενού ακορντεόν
Το εφέ μενού ακορντεόν βασίζεται σε καθαρό CSS, όπου κάνοντας κλικ σε κάθε γραμμή ανοίγει ένα επιπλέον παράθυρο στο σώμα της ίδιας της λίστας. Προσαρμοσμένη κινούμενη εικόνα σε προγράμματα περιήγησης που βασίζονται σε WebKit.
6. Κύλιση Parallax με CSS
Αυτό είναι ένα κινούμενο σχέδιο κύλισης παράλλαξης που χρησιμοποιεί μεταβάσεις CSS που βασίζονται στο WebKit. Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το παράθυρο κειμένου, τα αστέρια στο φόντο αρχίζουν να μετακινούνται ομαλά στο πλάι. Δημιουργείται το εφέ της πτήσης.
7. Μήτρα
Η καλτ ταινία «The Matrix» είναι μια από τις καλύτερες ταινίες επιστημονικής φαντασίας. Το παράδειγμα δείχνει πώς να αναδημιουργήσετε περίπου το ίδιο εκπληκτικό κινούμενο σχέδιο (μαύρη οθόνη με αριθμούς που τρέχουν) στο CSS3.
8. Δυναμικά Palaroid
Αυτό το παράδειγμα παρέχει μια λεπτομερή περιγραφή της δημιουργίας κινούμενων φωτογραφιών με βάση εντολές CSS3. Όταν κάνετε κλικ σε μια εικόνα, αυτή μεγεθύνεται και μετακινείται στο προσκήνιο.
9. Κλιμάκωση εικόνας
Σε αυτό το παράδειγμα, οι εικόνες απλώς μεγεθύνονται με το δείκτη του ποντικιού. Ένα απλό, αλλά μερικές φορές πολύ χρήσιμο αποτέλεσμα.
10. Εφέ JavaScript στο CSS3
Ως εναλλακτική λύση στο JavaScript, η ανάρτηση προτείνει επτά εφέ CSS3: διάφορα μπλοκ που περιστρέφονται, εξαφανίζονται, μετακινούνται, μεγαλώνουν κ.λπ.
11. Εικονικοί δίσκοι του DJ Hero
Αυτή η ανάρτηση εξηγεί πώς να δημιουργήσετε περιστρεφόμενες εγγραφές. Η ταχύτητα περιστροφής μπορεί να ρυθμιστεί απευθείας στην οθόνη.
12. Συρόμενο βινύλιο
Το συρόμενο εφέ δίσκου βινυλίου δημιουργείται χρησιμοποιώντας μεταβάσεις CSS3 και HTML. Τέτοια κινούμενα σχέδια ζωντανεύουν μια ιστοσελίδα, προσθέτουν πρωτοτυπία σε ένα τυπικό εξώφυλλο άλμπουμ κ.λπ.
13. Εφέ κατά την τοποθέτηση του ποντικιού πάνω από μια εικόνα
Όταν τοποθετείτε τον κέρσορα πάνω από μια εικόνα, μπορεί να μετακινηθεί στο πλάι, να περιστραφεί, να συρρικνωθεί, να μεταμορφωθεί από τετράγωνο σε στρογγυλό, να γίνει θολή... Με μια λέξη, οι εικόνες θα αλλάξουν τις ιδιότητές τους με κάθε δυνατό τρόπο.
14. Περιστρεφόμενο τρίγωνο
Όταν κάνετε κλικ στο τρίγωνο, αρχίζει να περιστρέφεται.
15. Διάστημα
Ένας ολόκληρος κοσμικός χώρος, συσκευασμένος σε CSS. Αυτό είναι ένα παράδειγμα περιστρεφόμενων επιπέδων (πιο αισθητό όταν κάνετε σμίκρυνση στο πρόγραμμα περιήγησης).
16. “Las Meninas” σε 3D
Ένα ενδιαφέρον εφέ CSS που κάνει τον διάσημο πίνακα του Ντιέγκο Βελάσκεθ «Las Meninas» να φαίνεται τρισδιάστατος.
17. CSS για Mac OS X
Στο κάτω μέρος της οθόνης υπάρχει ένα σύνολο κύριων εικονιδίων Mac OS X, τα οποία μεγεθύνονται όταν τοποθετείτε το δείκτη του ποντικιού από πάνω. Το εφέ προσθέτει δυναμική στον ιστότοπο.
18. Drop-In Modals
Τα εφέ CSS3 και οι ιδιότητες Drop-In Modals θα σας βοηθήσουν να δημιουργήσετε γρήγορες, κινούμενες και εύκολες αλλαγές τρόπων.
19. Εμψύχωση αντικειμένων
Ένας μετασχηματισμός αλλάζει την εμφάνιση ενός στοιχείου στο πρόγραμμα περιήγησης. Εμφανίζεται χρησιμοποιώντας το παράδειγμα ενός πυραύλου που «πετά» από τη μια άκρη της οθόνης στην άλλη. Μπορούν να χρησιμοποιηθούν εργαλεία μετακίνησης, περιστροφής κ.λπ.
20. Έγχρωμο ρολόι
Το Color Clock βασίζεται σε jQuery και CSS3. Ένα παρόμοιο αποτέλεσμα θα είναι χρήσιμο στο πλαίσιο της αναμονής για την ολοκλήρωση κάποιου διαγωνισμού, ψηφοφορίας και παρόμοια.
21. Lightbox Gallery με jQuery και CSS3
Αυτή είναι μια υπέροχη συλλογή που σας επιτρέπει να ταξινομήσετε και να τακτοποιήσετε εικόνες με τυχαία σειρά. Για διαδραστικότητα, η συλλογή χρησιμοποιεί JQuery, JQuery UI και την προσθήκη JQuery FancyBox. Το Lightbox υποστηρίζει τον τίτλο και την περιγραφή των εικόνων, τις ομαδοποιεί και τακτοποιεί αυτόματα τις διαφάνειες σε μια σειρά.
22. Προεπισκόπηση "Elastic".
Μεγέθυνση των προεπισκοπήσεων εικόνων κατά την αιώρηση. Έτσι, όταν κάνετε κλικ, το μενού αυξάνεται αναλογικά.
23. Δυναμικές κάρτες
Αυτό το παράδειγμα είναι ένα δυναμικό σύνολο καρτών που χρησιμοποιεί λειτουργίες HTML και CSS3.
24. Συρόμενο μενού JQuery
Το παράδειγμα μενού slideout δημιουργείται χρησιμοποιώντας έναν συνδυασμό CSS3 και JQuery. Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από την εικόνα, εμφανίζεται ένα αναδυόμενο παράθυρο με κείμενο.
25. Καρτέλες CSS
Στο παράδειγμα, η τοποθέτηση του ποντικιού πάνω από τις κεφαλίδες της καρτέλας προκαλεί την αλλαγή της παρακάτω λίστας.
26. Μενού Fisheye
Το παράδειγμα δείχνει πώς να δημιουργήσετε ένα μενού Fisheye χρησιμοποιώντας κινούμενα σχέδια CSS και SVG. Ως πρόσθετο πλεονέκτημα, χρησιμοποιείται ένα SVG επίδειξης στην ετικέτα IMG.
27. Αναπτυσσόμενο μενού
Αυτός ο τύπος παρέχει πολύ βολική πλοήγηση μέσω του κύριου μενού, χάρη στη χρήση μεταβάσεων CSS3.
28. Πιστώσεις Star Wars
Διάσημοι τίτλοι από το Star Wars. Το HTML και το CSS θα είναι αρκετά για να τα εκτελέσουν.
29. Περισσότερα εφέ Fisheye στο CSS
Και πάλι, εικονίδια που αυξάνονται όταν τοποθετείτε το δείκτη του ποντικιού πάνω.
30. Κινούμενα σχέδια καρέ-καρέ
Είναι δυνατές πολλές επιλογές επίδειξης.Στο πρώτο παράδειγμα, για να διασφαλίσετε μια αλλαγή πλαισίου, πρέπει να κάνετε κλικ στην εικόνα. Κάθε κλικ είναι μια κίνηση. Τα καρέ επαναλαμβάνονται, δημιουργώντας ένα συγκεκριμένο βρόχο.
Στο δεύτερο παράδειγμα, για να αλλάξετε καρέ, απλώς μετακινήστε τον κέρσορα πάνω από την εικόνα. Αντίστοιχα, η ταχύτητα κίνησης θα εξαρτηθεί από την ταχύτητα της κίνησης του ποντικιού.
31. Imperial AT-AT Walker
Για άλλη μια φορά Star Wars - αυτός ο κινούμενος περιπατητής AT-AT είναι κατασκευασμένος χρησιμοποιώντας CSS3.
32. Άλλο ένα ακορντεόν CSS
Όταν κάνετε κλικ σε μια σειρά, ο πίνακας επεκτείνεται.
33. Απλό συρόμενο μενού
40. Αναπτυσσόμενο μενού
Μια άλλη επιλογή για ένα απλό και ωραίο αναπτυσσόμενο μενού χρησιμοποιώντας CSS.
Πολύ συχνά σε ιστότοπους μπορεί να συναντήσετε αλλαγές ή κουμπιά κατά την τοποθέτηση του δείκτη. Μια ειδική ψευδο-κλάση:hover στο CSS σας επιτρέπει να υλοποιήσετε την εργασία. Σήμερα θα δούμε μερικές τεχνικές που μας επιτρέπουν να κάνουμε αυτό το κόλπο και παρακάτω θα δημοσιεύσουμε μια λίστα με τις πιο ενδιαφέρουσες από αυτές (με σύντομες περιγραφές/επεξηγήσεις). Θα χωρίσουμε όλες τις επιλογές σε:
Αυτές οι ομάδες είναι πολύ αυθαίρετες, γιατί πολλά παραδείγματα επικαλύπτονται και είναι καθολικά, δηλαδή μπορούν να βρεθούν κατά το σχεδιασμό διαφορετικών αντικειμένων.
Το εφέ hover στα στυλ CSS προστίθεται στα δεξιά του στοιχείου ως εξής:
| α: αιώρηση (χρώμα : κόκκινο ; ) |
a:hover (χρώμα: κόκκινο;)
Τις περισσότερες φορές, ο μηχανισμός χρησιμοποιείται ειδικά για συνδέσμους προκειμένου να αλλάξει το χρώμα τους ή να προσθέσει/αφαιρέσει υπογράμμιση. Ωστόσο, μπορεί επίσης να καθοριστεί για άλλα μπλοκ, κουμπιά, κείμενα ή να χρησιμοποιηθεί κατά τη δημιουργία.
| κουμπί : αιώρηση ( φόντο : rgba (0 , 0 , 0 , 0 ) ; χρώμα : κόκκινο ; .my-picture : αιώρηση ( αδιαφάνεια : 0,5 , φίλτρο : άλφα (αδιαφάνεια= 50 ) ; ) |
button:hover ( φόντο: rgba(0,0,0,0); χρώμα: κόκκινο; ) .my-picture:hover ( αδιαφάνεια: 0,5; φίλτρο: άλφα(αδιαφάνεια=50); )
Τα σύγχρονα προγράμματα περιήγησης αντιλαμβάνονται εξίσου σωστά το φαινόμενο αιώρησης CSS στο hover, αν και σε παλαιότερες εκδόσεις του IE 6 και κάτω λειτουργεί μόνο για συνδέσμους. Επιπλέον, ορισμένες πηγές είπαν ότι αυτό πρέπει να προσδιορίζεται στον κώδικα.
Παρεμπιπτόντως, κατά τη ρύθμιση των στυλ συνδέσμων, μπορούν επίσης να χρησιμοποιηθούν επιλογείς: σύνδεσμος - για σελίδες που δεν έχουν γίνει ακόμη επίσκεψη, :visited - για εκείνες όπου έχετε ήδη πάει + :active καθορίζει την τρέχουσα ενεργή διεύθυνση. Είναι σημαντικό να τοποθετήσετε το εφέ hover στο CSS μετά το :link και το :visited εάν υπάρχουν.
Ας περάσουμε από τη θεωρία στην πράξη. Ακολουθεί μια λίστα με χρήσιμα υλικά και αποσπάσματα - ακολουθήστε τους συνδέσμους για να δείτε τις πηγές.
Εφέ αιώρησης για κουμπιά και συνδέσμους
Όπως είπαμε παραπάνω, αυτή είναι η πιο δημοφιλής κατηγορία αντικειμένων στον ιστότοπο όπου βρίσκεται αυτή η τεχνική. Ακολουθούν ορισμένες επιλογές για το θέμα.
Απλά παραδείγματα για κουμπιά
Κουμπιά Sullivan
Το κόλπο είναι ότι όταν τοποθετείτε το δείκτη του ποντικιού πάνω από διαφορετικά κουμπιά, εκτός από την αλλαγή του χρώματος του φόντου, εκκινείται και ένα μικρό κινούμενο σχέδιο με εικονίδια (το καθένα με τα δικά του).
Εικονίδια CSS στο Hover
Μια επιλογή από 5 απλές επιλογές για την υλοποίηση της εργασίας. Σε όλες τις περιπτώσεις, χρησιμοποιούνται πρόσθετα εικονίδια που εμφανίζονται δεξιά/αριστερά του κειμένου ή το αντικαθιστούν.
Εφέ αιώρησης κουμπιών
Σε σύγκριση με το προηγούμενο παράδειγμα, αυτές οι 12 λειτουργίες ενεργοποίησης φαίνονται πολύ πιο ενδιαφέρουσες: τόσο οπτικά όσο και από άποψη κώδικα. Όχι χωρίς JS.
Nav Hovers
Αρκετές λειτουργίες που σας επιτρέπουν να κάνετε κάτι πιο ασυνήθιστο από ό,τι με τη βασική ιδιότητα διακόσμησης κειμένου. Το φόντο του κουμπιού είναι επιπλέον γεμάτο με διάφορα οπτικά εφέ.
Πληροφορίες για το Hover
Η λειτουργία Tooltips υποστηρίζεται αυτήν τη στιγμή σε όλα τα προγράμματα περιήγησης, αλλά μπορείτε να την προσαρμόσετε ώστε να ταιριάζει στις ανάγκες σας. Στο τρέχον παράδειγμα, η ψευδο-κλάση ενεργοποιείται για την ετικέτα dfn, η οποία φαίνεται κομψή. Ο κώδικας είναι αρκετά συμπαγής HTML + CSS.
Κουμπί Μάνα
Μια από τις πιο πρωτότυπες παραλλαγές του εφέ αιώρησης σε μπλοκ - όταν αιωρείται, είναι σαν να το γεμίζετε με υγρό. Η υλοποίηση χρησιμοποιεί CSS, HTML και SVG. Για ορισμένα θέματα ιστότοπου, αυτό το απόσπασμα θα είναι σίγουρα θεϊκό δώρο.
Εφέ αιώρησης για εικόνες
15 βασικές τεχνικές
Παρά το γεγονός ότι το άρθρο δημοσιεύτηκε πριν από πολύ καιρό, οι μέθοδοι εξακολουθούν να λειτουργούν σωστά. Εδώ, πιθανώς, συγκεντρώνονται όλοι οι πιθανοί τυπικοί μετασχηματισμοί για γραφικά: διάφοροι τύποι ζουμ, περιστροφής, θολώματος, ασπρόμαυρος, διαφάνεια, φίλτρα, λάμψη κ.λπ. Πολύ χρήσιμο υλικό.
Όμορφες εικόνες εφέ hover
Μια επιλογή από 30 ευχάριστες και ομαλές ενέργειες όταν τοποθετείτε τον δείκτη του ποντικιού πάνω από μια εικόνα. Λόγω απλών οπτικών χειρισμών με τη μορφή ζουμ και προσθήκης γραμμών, δημιουργείται μια καλή σύνθετη εντύπωση. Σε ορισμένα σημεία ο τίτλος μεγεθύνεται και η σύντομη περιγραφή γίνεται πιο αυστηρή. Εξαιρετική επιλογή για χαρτοφυλάκιο.
Barberpole Hover Animation
Το animation δεν είναι περίπλοκο με την πρώτη ματιά, αλλά στο τέλος φαίνεται πολύ δροσερό και ασυνήθιστο.
Εφέ αιώρησης CSS με ανίχνευση κατεύθυνσης
Μια εξαιρετική επιλογή αποσπασμάτων και κωδικών σχετικά με το θέμα μπορείτε να βρείτε στο άρθρο από το css-tricks.com. Όλα αυτά τα παραδείγματα ενώνονται από το γεγονός ότι κατά τη λειτουργία καθορίζεται η θέση και η κατεύθυνση της κίνησης του δρομέα. Αυτό, με τη σειρά του, σας επιτρέπει να δημιουργήσετε αρκετά πρωτότυπες αντιδράσεις όταν τοποθετείτε το δείκτη του ποντικιού πάνω από στοιχεία σελίδας:
Σε πολλές σύνθετες λύσεις, το Javascript και το jQuery για εφέ αιώρησης μπορούν να διαφοροποιήσουν σημαντικά και να βελτιώσουν το αποτέλεσμα.
Direction Aware Hover Goodness
Πλακίδια με επίγνωση κατεύθυνσης με χρήση διαδρομής κλιπ Pure CSS
Βρείτε τα υπόλοιπα κόλπα στο αρχικό άρθρο.
Εμψυχισμός
Αυτή η ανάπτυξη περιλαμβάνει περισσότερους από 100 απλούς τρόπους για να "ζωντανέψετε" εικόνες ή αντικείμενα που βρίσκονται σε λειτουργία αιώρησης. Χρησιμοποιώντας αυτές τις λειτουργίες, μπορείτε να εφαρμόσετε διαφορετικές εμφανίσεις κουμπιών, επικεφαλίδων, κειμένων, εικονιδίων κοινωνικής δικτύωσης κ.λπ. Υπάρχουν επιλογές με αλλαγή της εμφάνισης εικόνων και ημιδιαφανών επικαλύψεων φόντου.
Ο σύνδεσμος περιέχει 7 εφέ κεφαλίδας δείκτη CSS3 - όταν τοποθετείται το δείκτη του ποντικιού πάνω από μια εικόνα, ο χρήστης θα δει ένα μπλοκ πληροφοριών με έναν τίτλο, μια σύντομη περιγραφή και έναν σύνδεσμο για πλοήγηση. Αυτό δεν σημαίνει ότι τα παραδείγματα είναι πολύ πρωτότυπα, αλλά σίγουρα θα βοηθήσουν στη διαφοροποίηση ενός έργου στατικού περιεχομένου.
Βιβλιοθήκες CSS Hover
Hover.css
Το έργο, που ονομάζεται απλά Hover.css, περιέχει μια συλλογή από εφέ CSS3 για συνδέσμους, κουμπιά, μπλοκ κ.λπ. Μπορείτε να χρησιμοποιήσετε έτοιμο κώδικα ή/και να προσθέσετε τις δικές σας τροποποιήσεις σε αυτόν. Υπάρχουν πολλά ενδιαφέροντα πράγματα εδώ: μετασχηματισμοί 2D/3D, εργασία με φόντο και καρέ, σκιές, εικονίδια. Η λύση είναι διαθέσιμη σε μορφές CSS, LESS και Sass.
Imagehover.css
Μια άλλη βιβλιοθήκη που ορίζει εφέ hover για φωτογραφίες - στη δωρεάν έκδοση θα βρείτε 44 επιλογές μετασχηματισμού (το σετ premium περιέχει 5 φορές περισσότερες). Το LESS και το SCSS υποστηρίζονται επίσης εδώ, αυτό το αρχείο ζυγίζει μόνο 19 kb. Ο ιστότοπος έχει μια σελίδα που παρουσιάζει όλα τα παραδείγματα εργασίας. Υπάρχουν πολλά μοναδικά χαρακτηριστικά που δεν έχουν δει παραπάνω.
Το έργο περιλαμβάνει περισσότερες από 30 διαφορετικές τεχνικές για στρογγυλά και τετράγωνα αντικείμενα. Όλα είναι αρκετά πρωτότυπα· πρακτικά δεν υπάρχουν απλές ενέργειες «μονοστοιχείου» με τη μορφή κανονικού zoom/fly out. Η εργασία υλοποιήθηκε χρησιμοποιώντας καθαρό CSS3 + HTML (συν τα αρχεία Scss που περιλαμβάνονται). Εξαιρετική συμβατότητα με το Bootstrap 3, διαθέσιμη τεκμηρίωση.
Σύνολο.Ελπίζουμε ότι αυτά τα εφέ css hover όταν τοποθετείτε το δείκτη του ποντικιού πάνω από εικόνες, μπλοκ, συνδέσμους και άλλα στοιχεία σελίδας σας βοήθησαν να κατανοήσετε αυτό το θέμα. Μπορείτε να εφαρμόσετε τις πιο επιτυχημένες λύσεις, κατά τη γνώμη σας, στους ιστότοπούς σας - είτε πρόκειται για τη σύνδεση μιας πλήρους βιβλιοθήκης είτε απλώς για την ενσωμάτωση μιας μικρής έκδοσης του κώδικα.
Εάν γνωρίζετε άλλα ενδιαφέροντα χαρακτηριστικά και αποσπάσματα, στείλτε τους διευθύνσεις URL στα σχόλια. Και θα προσθέσουμε στο άρθρο στο μέλλον.
Αν σας αρέσει το εφέ, τότε μπορείτε απλά να αντιγράψετε τον τελικό κώδικα και να τον χρησιμοποιήσετε!
Δώστε ζωή στον ιστότοπό σας!
Τα διαφορετικά εφέ αιώρησης μπορούν να προσθέσουν φρεσκάδα στις σελίδες του ιστότοπού σας. Προηγουμένως, για οποιοδήποτε αποτέλεσμα έπρεπε να ασχοληθείς με τη javascript, αλλά σήμερα, μετά την έλευση της τεχνολογίας CSS3, όλα μπορούν να γίνουν χωρίς τη χρήση javascript.
Όλα τα σημερινά παραδείγματα έχουν εφαρμοστεί και βελτιστοποιηθεί για νέα σύγχρονα προγράμματα περιήγησης και σίγουρα θα λειτουργήσουν σε αυτά (για παράδειγμα, στο Mozilla ή σε προγράμματα περιήγησης της οικογένειας WebKit). Δεν μπορούμε να σας διαβεβαιώσουμε ότι θα λειτουργήσει σε IE, αλλά στις τελευταίες εκδόσεις τα εφέ θα λειτουργήσουν σίγουρα όπως θα έπρεπε. Αλλά μην ξεχνάτε ότι για κάθε εφέ έχει προετοιμαστεί μια ελκυστική επιλογή επαναφοράς σε περίπτωση που το πρόγραμμα περιήγησης εξακολουθεί να μην υποστηρίζει το εφέ.
01. Ζουμ
Διαδήλωση:Για προβολή
Αυτό το εφέ είναι πολύ εύκολο στην εφαρμογή και μπορεί να γίνει με διάφορους τρόπους. Χρησιμοποιήσαμε μια μέθοδο όπου μια παράμετρος περιθωρίου προστίθεται σε κάθε εικόνα και, στη συνέχεια, όταν τοποθετείτε τον κέρσορα του ποντικιού, αυτή η παράμετρος αφαιρείται. Ας υποθέσουμε ότι η ρύθμιση του περιθωρίου ξεκινά από 15 εικονοστοιχεία και όταν τοποθετείτε το δείκτη του ποντικιού γίνεται 2 εικονοστοιχεία, γεγονός που κάνει την εικόνα να φαίνεται ότι μεταπηδά. Μπορείτε επίσης απλά να χρησιμοποιήσετε αυτό το εφέ με κείμενο, ακόμα κι αν οι σύνδεσμοι είναι τοποθετημένοι κατακόρυφα και όχι οριζόντια.
Η μετάβαση εδώ μπορεί να ρυθμιστεί κατά την κρίση σας και το αποτέλεσμα θα είναι επίσης ελκυστικό χωρίς καμία μετάβαση. Για παράδειγμα, κάναμε το εφέ λίγο ομαλό, το οποίο πιστεύαμε ότι θα έδινε κάποια αίσθηση στο εφέ.
Bump Up Effect CSS Code
Ex1 img(
περίγραμμα: 5px συμπαγές #ccc;
float: αριστερά;
περιθώριο: 15 px;
-webkit-transition: margin 0,5s ease-out.
-moz-transition: margin 0,5s ease-out.
-o-transition: margin 0,5s ease-out;
}
Ex1 img:hover (
margin-top: 2px;
}
02. Stack & Grow
Διαδήλωση:Για προβολή
Ο συγγραφέας αυτού του εφέ προφανώς ήθελε να επιτύχει κάποιου είδους εφέ λάμπας λάβας, καθώς όταν τοποθετείτε τον κέρσορα του ποντικιού πάνω από τη λίστα των συνδέσμων, κάθε εικόνα επεκτείνεται αργά και στη συνέχεια επιστρέφει στο αρχικό της μέγεθος.
Για εφαρμογή εδώ, χρησιμοποιήθηκαν εικόνες 400x133 pixel. Στη συνέχεια άλλαξαν το μέγεθός τους σε 300x100 pixel χρησιμοποιώντας CSS και επεκτάθηκαν με την τοποθέτηση του ποντικιού. Εφόσον στο παράδειγμα ολόκληρη η λίστα είναι στοίχιση στο κέντρο, το νέο μέγεθος των εικόνων διαθλούσε ολόκληρη τη στοίχιση. Αυτό το πρόβλημα μπορεί να λυθεί ορίζοντας τα αρνητικά περιθώρια στο μισό του πλάτους των μεγεθυσμένων εικόνων.
Κωδικός CSS για Stack & Grow
/*Παράδειγμα 2*/
#container (
πλάτος: 300 px;
περιθώριο: 0 αυτόματο;
}
#ex2 img(
ύψος: 100 px;
πλάτος: 300 px;
περιθώριο: 15 px 0;
-webkit-transition: all 1s easy?
-moz-transition: all 1s ease?
-o-transition: all 1s ease?
}
#ex2 img:hover (
ύψος: 133 px;
πλάτος: 400 px;
margin-αριστερά: -50px;
}
03. Fade Text in
Διαδήλωση:Για προβολή
Εδώ ο συγγραφέας ήθελε να δημιουργήσει κάτι σαν ένα συμβάν τύπου javascript όπου τοποθετείτε το δείκτη του ποντικιού πάνω από ένα στοιχείο και το εφέ εμφανίζεται σε ένα άλλο. Εδώ το κείμενο και η εικόνα τραβήχτηκαν και στη συνέχεια τοποθετήθηκαν σε ξεχωριστό αριστερό στοιχισμένο τμήμα. Στη συνέχεια, οι παράμετροι χρώμα: διαφανές και ύψος γραμμής: 0 px προστέθηκαν στο div. Αυτό μας επέτρεψε να τοποθετήσουμε το κείμενο κατά μήκος της επάνω άκρης του div και να το κρύψουμε εντελώς.
Για να εμφανιστεί ξανά το κείμενο, απλώς αλλάζουμε το χρώμα και το ύψος της γραμμής. Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από την εικόνα, το κείμενο εμφανίζεται ξανά. Πολύ αστείο και εύκολο αποτέλεσμα.
Fade Text In Effect Code CSS
#πρώην 3 (
πλάτος: 730 px;
ύψος: 133 px;
Ύψος γραμμής: 0 px;
χρώμα: διαφανές;
μέγεθος γραμματοσειράς: 50 px;
γραμματοσειρά-οικογένεια: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
βάρος γραμματοσειράς: 300;
μετατροπή κειμένου: κεφαλαία;
}
#ex3:hover (
Ύψος γραμμής: 133 px;
χρώμα: #575858;
}
#ex3 img(
float: αριστερά;
περιθώριο: 0 15px;
}
04. Στραβή φωτογραφία
Διαδήλωση:Για προβολή
Αυτό το εφέ είναι πολύ απλό, αλλά θα ήταν υπέροχο για μια συλλογή μικρογραφιών. Για να ξεκινήσετε, πρέπει να δημιουργήσετε ένα πλέγμα εικόνων και στη συνέχεια να περιστρέψετε τις εικόνες όταν τοποθετείτε το δείκτη του ποντικιού πάνω τους, κάτι που δημιουργεί ένα ελκυστικό εφέ.
Υπάρχουν πολλές νέες τιμές CSS που πρέπει να χρησιμοποιηθούν εδώ, επομένως αξίζει να σκεφτείτε να επιστρέψετε και σε προηγούμενες εκδόσεις προγραμμάτων περιήγησης. Η συλλογή μας θα χρησιμοποιήσει μεταβάσεις, μετασχηματισμούς και σκιές μπλοκ, ωστόσο, κατόπιν αιτήματός σας. Ο μετασχηματισμός θα είναι υπεύθυνος για την περιστροφή της εικόνας και οι μεταβάσεις θα είναι υπεύθυνες για το απαλό και ομαλό αποτέλεσμα.
Εδώ μπορείτε να χρησιμοποιήσετε ψευδο-επιλογείς.
Κωδικός CSS για Crooked Photo
#πρώην 4 (
πλάτος: 800 px;
περιθώριο: 0 αυτόματο;
}
#ex4 img (
περιθώριο: 20 px;
περίγραμμα: 5px συμπαγές #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0,2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0,2);
box-shadow: 4px 4px 4px rgba(0,0,0,0,2);
-webkit-transition: όλα τα 0,5s ease-out.
-moz-transition: όλα τα 0,5s ευκολία?
-o-transition: όλα τα 0,5s ευκολία?
}
#ex4 img:hover (
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
05. Fade In and Reflect
Διαδήλωση:Για προβολή
Αυτό το εφέ είναι λίγο πιο δύσκολο να εφαρμοστεί, οπότε έπρεπε να το τσιμπήσουμε λίγο για να πετύχουμε ένα αξιοπρεπές αποτέλεσμα. Η προεπιλεγμένη θέση εικόνας είναι ελαφρώς διαφανής. Στη συνέχεια, όταν τοποθετείτε το δείκτη του ποντικιού πάνω από την εικόνα, το επίπεδο διαφάνειας μειώνεται και η εικόνα επιστρέφει στην αρχική της εμφάνιση, μαζί με μια ελαφριά λάμψη και αντανάκλαση (μόνο για προγράμματα περιήγησης WebKit).
Δυστυχώς, η αντανάκλαση δεν είναι ακριβώς μια μετάβαση, επομένως εμφανίζεται αμέσως, παρόλο που το υπόλοιπο περιεχόμενο εμφανίζεται σε αργή κίνηση.
Εάν έχετε σύγχυση σχετικά με το CSS ανάκλασης, μπορείτε να διαβάσετε περισσότερα σχετικά σε αυτό το άρθρο (David Walsh).
Fade In and Reflect Code CSS
#πρώην 5 (
πλάτος: 700 px;
περιθώριο: 0 αυτόματο;
Ελάχιστο ύψος: 300 px;
}
#ex5 img (
περιθώριο: 25 px;
αδιαφάνεια: 0,8;
περίγραμμα: 10px συμπαγές #eee;
/*Μετάβαση*/
-webkit-transition: όλα τα 0,5s ευκολία.
-moz-transition: όλα τα 0,5s ευκολία?
-o-transition: όλα τα 0,5s ευκολία?
/*Αντανάκλαση*/
-webkit-box-reflect: κάτω από 0 εικονοστοιχεία -webkit-gradient(γραμμικό, επάνω αριστερά, κάτω αριστερά, από(διαφανές), color-stop(.7, διαφανές), σε(rgba(0,0,0,0,1)) )
}
#ex5 img:hover (
αδιαφάνεια: 1;
/*Αντανάκλαση*/
-webkit-box-reflect: κάτω από 0 εικονοστοιχεία -webkit-gradient(γραμμικό, αριστερό επάνω, αριστερό κάτω, από(διαφανές), color-stop(.7, διαφανές), σε(rgba(0,0,0,0,4)) )
/*Λάμψη*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0,8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0,8);
box-shadow: 0px 0px 20px rgba(255,255,255,0,8);
}
συμπέρασμα
Αυτά τα 5 παραδείγματα θα πρέπει να είναι αρκετά για να σας εμπνεύσουν να δημιουργήσετε κάτι δικό σας. Να θυμάστε ότι μπορείτε πάντα να πειραματιστείτε με έτοιμα παραδείγματα και μετά να μας πείτε για αυτά.
Εάν έχετε συναντήσει άλλα ελκυστικά εφέ κάπου στο διαδίκτυο, ενημερώστε μας και άλλους αναγνώστες σχετικά.
Καταρχήν, για όσους δεν έχουν ασχοληθεί ακόμα πλήρως με το θέμα ή δεν ασχολούνται καθόλου με το θέμα, θα εξηγήσω εν συντομία τι είναι. Αυτοί είναι διάφοροι τύποι εφέ (αναδυόμενοι υπότιτλοι, συμβουλές εργαλείων, ομαλές μεταβάσεις, μετασχηματισμός, περιστροφή, μεγέθυνση, μετατόπιση, κ.λπ., κ.λπ.) που εφαρμόζονται σε στοιχεία ιστότοπου όταν τοποθετείτε τον κέρσορα του ποντικιού πάνω τους. Αυτά τα εφέ μπορούν να υλοποιηθούν χρησιμοποιώντας διάφορα πρόσθετα jQuery ή καθαρά .
Σήμερα ετοίμασα μια μεγάλη ποικιλία από πρωτότυπα εφέ hover για εικόνες που δημιουργήθηκαν με χρήση CSS3, χωρίς σύνδεση βιβλιοθηκών javascript. Δεν θα μιλήσω για τα πλεονεκτήματα και τα μειονεκτήματα της εφαρμογής των εφέ hover σε καθαρό CSS3, αυτό είναι άλλο θέμα, απλά κοιτάξτε τα παραδείγματα και, εάν χρειάζεται, χρησιμοποιήστε αυτό που σας αρέσει στον ιστότοπό σας. Όλα τα εφέ που παρουσιάζονται στην ανασκόπηση παρέχονται με ένα παράδειγμα επίδειξης και λεπτομερή τεκμηρίωση με πηγαίους κώδικες. Τα εγχειρίδια είναι ως επί το πλείστον σε αστική γλώσσα, αλλά όλα είναι λίγο πολύ διαισθητικά.
Θα ήθελα να επιστήσω αμέσως την προσοχή σας στο γεγονός ότι όλα αυτά τα παραδείγματα θα λειτουργούν σωστά μόνο σε σύγχρονα προγράμματα περιήγησης που υποστηρίζουν ιδιότητες CSS3.
Για να μην καταστρέψω τη συνολική εικόνα, δεν παραμόρφωσα τα ονόματα των εφέ με αυτόματη μετάφραση (με εξαίρεση ορισμένα), άφησα τους αρχικούς τίτλους όπως τους αποκαλούσε ο προγραμματιστής.
Ένα πολύ ενδιαφέρον εφέ όταν τοποθετείτε τον δείκτη του ποντικιού πάνω από μικρογραφίες, χρησιμοποιώντας λεπτές γραμμές στο σχεδιασμό και την τυπογραφία. Αρκετοί διαφορετικοί τύποι εφέ για την εμφάνιση λεζάντες εικόνων, απαλοί και μη παρεμβατικοί τρισδιάστατοι μετασχηματισμοί και ομαλές μεταβάσεις ψευδοστοιχείων. Λειτουργεί μόνο σε σύγχρονα προγράμματα περιήγησης.
Το iHover είναι μια εντυπωσιακή συλλογή από καθαρά εφέ αιώρησης CSS3, με υποστήριξη Bootstrap 3. Χτισμένο σε Scss CSS (αρχείο), που τροποποιείται εύκολα με μεταβλητές. Ο κώδικας είναι αρθρωτός, δεν χρειάζεται να συμπεριλάβετε ολόκληρο το αρχείο. 30+ διαφορετικά εφέ σε ένα πακέτο. Όλα είναι αρκετά καλά τεκμηριωμένα και τα εφέ είναι πολύ εύκολα στη χρήση. Το μόνο που χρειάζεται να κάνετε είναι να δημιουργήσετε σωστά τη σήμανση HTML και να συμπεριλάβετε το αρχείο CSS στην εργασία σας.
Δημιουργεί μερικά απλά αλλά κομψά εφέ αιώρησης για λεζάντες εικόνων. Η ιδέα είναι να τοποθετήσετε το δείκτη του ποντικιού πάνω από τις μικρογραφίες για να εμφανιστεί ο τίτλος, το όνομα του συγγραφέα και τα κουμπιά επαφής. Για ορισμένα εφέ, χρησιμοποιούνται τρισδιάστατοι οπτικοί μετασχηματισμοί.
Ένα πολύ απλό εφέ μετάβασης, χωρίς ιδιαίτερες καμπάνες και σφυρίχτρες, μια εντελώς στρογγυλή εικόνα σε ένα πλαίσιο, μεταμορφώνεται αλλάζοντας την εστίαση όταν αιωρείται και αυτό είναι.
Τοποθετήστε εφέ για μικρογραφίες χρησιμοποιώντας CSS3
Ο προγραμματιστής τοποθετεί την εργασία του ως παράδειγμα συλλογής εικόνων με εφέ μετάβασης όταν εμφανίζονται σχολιασμοί (λεζάντες) στις μικρογραφίες. Δηλώνεται σίγουρη υποστήριξη από σύγχρονα προγράμματα περιήγησης, συμπεριλαμβανομένου του IE 9+. Φυσικά, είναι δύσκολο να το ονομάσουμε μια ολοκληρωμένη γκαλερί, αλλά το αποτέλεσμα της εμφάνισης των υπογραφών είναι αρκετά ενδιαφέρον.
Ένα άλλο σύνολο κανόνων CSS για τη δημιουργία εντυπωσιακών εφέ μετασχηματισμού όταν τοποθετείτε τον δείκτη του ποντικιού πάνω από τέλεια στρογγυλές μικρογραφίες. Το πακέτο περιέχει 7 τύπους μεταβάσεων CSS3, πολύ λεπτομερή τεκμηρίωση για τη διαμόρφωση και τη χρήση. Τα εφέ υποστηρίζονται από όλα τα σύγχρονα προγράμματα περιήγησης.
Περιστρέψτε τις μικρογραφίες κατά την τοποθέτηση του δείκτη
Ένα απλό εφέ της περιστροφής στρογγυλών μικρογραφιών όταν τοποθετείτε τον κέρσορα του ποντικιού πάνω τους, περίπου το ίδιο μπορείτε να δείτε στο ιστολόγιό μου, στις ανακοινώσεις των αναρτήσεων στην κύρια σελίδα. Υλοποιήθηκε με μερικές γραμμές κώδικα css.
Για να το μεταφράσουμε κυριολεκτικά: «Σεξουαλική επίδραση όταν αιωρείται πάνω». Φυσικά, είναι απίθανο να παρατηρήσετε κάτι τόσο σέξι σε αυτό το εφέ, εκτός αν έχετε άγρια φαντασία, αλλά το αποτέλεσμα είναι ενδιαφέρον με τον δικό του τρόπο και αξίζει να το προσέξετε.
Πέντε διαφορετικά εφέ για εικόνες όταν τοποθετείτε το δείκτη του ποντικιού πάνω τους. Αναδυόμενες υπογραφές σε τρεις παραλλαγές, κουρτίνες σε μορφή αλλαγής του βαθμού διαφάνειας και περιστροφής με οριζόντια κίνηση.
4 Τύποι εφέ κινουμένων σχεδίων για λεζάντες εικόνων, που υλοποιούνται αποκλειστικά με χρήση CSS3. Διαφορετικές θέσεις κατά την εμφάνιση και εφέ μετάβασης, αρκετά τυπικό σχέδιο. Για να κατανοήσετε πώς λειτουργεί η κινούμενη εικόνα, ρίξτε μια ματιά στον πηγαίο κώδικα της δοκιμαστικής σελίδας. Δεν βρήκα καμία ξεχωριστή τεκμηρίωση.
Μικροσκοπικές γκαλερί διατεταγμένες σε πλέγμα με διάφορα εφέ για εμφάνιση υπογραφών, περιστροφή, ανάπτυξη, αναδυόμενο παράθυρο κ.λπ. Η τεκμηρίωση σχετικά με τη χρήση και τη διαμόρφωση είναι αρκετά αραιή, αλλά αν το θέλετε πραγματικά, μπορείτε να το καταλάβετε.
Αυτό το εφέ δεν είναι τίποτα το ιδιαίτερο, μια συνηθισμένη αλλαγή στη φωτεινότητα των εικόνων όταν αιωρούνται, εκτός από το ότι έχουν προστεθεί στοιχεία κινούμενης εικόνας. Θα πρέπει να καταλάβετε μόνοι σας τις λεπτομέρειες της υλοποίησης, τοποθετώντας τον πηγαίο κώδικα της επίδειξης.
Ένα άλλο σετ 10 εφέ αιώρησης για εικόνες, διάφορες τροποποιήσεις μικρογραφιών κατά την αιώρηση, μεγέθυνση, περιστροφή, περιστροφή, σκουρόχρωμο κ.λπ.
Τα διάφορα εφέ κίνησης καρέ γύρω από τις εικόνες φαίνονται αρκετά ελκυστικά, υπάρχει ένα λεπτομερές εγχειρίδιο για τη ρύθμιση και τη χρήση του.
Αυθεντικά εφέ αιώρησης CSS3 που χρησιμοποιούνται για την αποτελεσματική εμφάνιση λεζάντες μικρογραφιών εικόνων όταν τοποθετούνται το δείκτη του ποντικιού. Το σύνολο κανόνων CSS περιλαμβάνει 10 διαφορετικά εφέ που μπορείτε να χρησιμοποιήσετε ξεχωριστά για διαφορετικές εικόνες. Τα εφέ είναι πραγματικά εντυπωσιακά, ειδικά αν σκεφτεί κανείς ότι όλα έγιναν χρησιμοποιώντας CSS3. Ένας λεπτομερής οδηγός θα σας βοηθήσει να καταλάβετε τι είναι τι.
Η ιδέα είναι να δημιουργήσετε ένα SVG που είναι σχήμα φόντου για κάποιο κείμενο και μετατρέπεται σε άλλο σχήμα με την τοποθέτηση του ποντικιού. Με αυτόν τον τρόπο, μπορείτε να κάνετε πολλές διαφορετικές επιλογές· στο παράδειγμα, εμφανίζονται τρεις τύποι εφέ μετάβασης. Το πλεονέκτημα της χρήσης SVG είναι ότι μπορούμε να αλλάξουμε το μέγεθος της φόρμας ώστε να ταιριάζει στο μέγεθος του γονικού κοντέινερ.
Συρόμενες εικόνες
Η ουσία αυτού του εφέ είναι ότι η εικόνα μετακινείται πάνω-κάτω για να εμφανιστεί η λεζάντα. Εάν εργάζεστε με τις παραμέτρους στυλ, νομίζω ότι μπορείτε να επιτύχετε μερικά πολύ ωραία εφέ, αλλά από προεπιλογή, όλα φαίνονται πολύ απλά.
Με αυτό το εφέ, όλα είναι απλά, οι λεζάντες των εικόνων γλιστρούν επάνω δεξιά ή κάτω αριστερά, με τη μορφή κορδέλας με ημιδιαφανές σκούρο φόντο, τα πάντα αναδιαμορφώνονται πολύ απλά χρησιμοποιώντας ιδιότητες css.
Μια ενδιαφέρουσα λύση: οι μικρογραφίες παρουσιάζονται σε σκούρα μορφή· όταν τοποθετείτε το δείκτη του ποντικιού πάνω τους, εμφανίζονται οι εικόνες και η υπογραφή εμφανίζεται σε ανοιχτόχρωμο φόντο.
Η λεζάντα για την εικόνα εμφανίζεται από τη γωνία και επεκτείνεται διαγώνια σε ολόκληρη την περιοχή της εικόνας.
Μερικές πιο ενδιαφέρουσες λύσεις για την εφαρμογή αναδυόμενων λεζάντων για μικρογραφίες εικόνων. Στο ηλεκτρονικό πρόγραμμα επεξεργασίας, μπορείτε να πειραματιστείτε με τις παραμέτρους και να επιτύχετε πιο εντυπωσιακά αποτελέσματα.
Ένα σύνολο όμορφων εφέ όταν τοποθετείτε τον δείκτη του ποντικιού πάνω από μικρογραφίες, διάφορους τύπους εμφάνισης και σχεδιασμό λεζάντες για φωτογραφίες. Οι λεπτές γραμμές σε αντίθεση με ένα ελαφρώς σκούρο φόντο δημιουργούν ευανάγνωστα μπλοκ πληροφοριών.
Παράξενα σχήματα και ένα εφέ μεγέθυνσης σε συνδυασμό με το κινούμενο εφέ της εμφάνισης λεζάντες για μικρογραφίες εικόνων.
Υπέροχα εφέ επικάλυψης εικονιδίων σε μικρογραφίες εικόνων σε διάφορες παραλλαγές εμφάνισης. Το παράδειγμα χρησιμοποιεί ένα σύμβολο (+) που περιγράφεται σε κύκλο χρησιμοποιώντας ακτίνα περιγράμματος: στο CSS, μπορείτε επίσης να χρησιμοποιήσετε γραμματοσειρές εικονιδίων για να κάνετε το αναδυόμενο πλαίσιο πιο κατατοπιστικό.
Ένα παράδειγμα δημιουργίας οπτικού εφέ διαφάνειας για την εμφάνιση τρισδιάστατων λεζάντων για εικόνες χρησιμοποιώντας μόνο CSS3 και HTML5.
6 Λεζάντες για φωτογραφίες
6 Επιλογές για την εμφάνιση υπότιτλων αναδυόμενων εικόνων κατά την τοποθέτηση του δείκτη με χρήση CSS3. Ένα λεπτομερές μάθημα για την υλοποίηση και τη διαμόρφωση, πηγές διαθέσιμες για λήψη.
Και τέλος, στο τέλος, δεν μπορώ παρά να αναφέρω τον απλούστερο τρόπο δημιουργίας μιας αναδυόμενης λεζάντας για μια μικρογραφία χρησιμοποιώντας CSS3.
Χρειαζόμαστε ενδιαφέροντα και χρήσιμα άρθρα για να δημοσιεύσουμε στο φόρουμ μας. Έχουμε διορθωτή και επιμελητή, οπότε δεν χρειάζεται να ανησυχείτε για την ορθογραφία και τη μορφοποίηση κειμένου. Θα τα ελέγξουμε όλα και θα τα κανονίσουμε όμορφα.
Το CSS3 έχει δώσει αμέτρητες δυνατότητες στους σχεδιαστές UX (UX) και το καλύτερο σε αυτό είναι ότι τα πιο cool στοιχεία είναι πραγματικά εύκολο να εφαρμοστούν.
Μόλις μερικές γραμμές κώδικα θα σας δώσουν εκπληκτικά εφέ μετάβασης που θα ενθουσιάσουν τους χρήστες σας, θα αυξήσουν την αφοσίωση και τελικά, εάν χρησιμοποιηθούν σωστά, θα αυξήσουν την επισκεψιμότητά σας. Επιπλέον, αυτά τα εφέ χρησιμοποιούν επιτάχυνση υλικού, η οποία είναι πρόοδος στην οποία μπορείτε να συμμετάσχετε αυτήν τη στιγμή.
Ακολουθούν 8 πραγματικά απλά εφέ που θα δώσουν ζωή στη διεπαφή χρήστη (διεπαφή χρήστη) και χαμόγελα στα πρόσωπα των χρηστών σας.
Όλα αυτά τα εφέ (ένα ορθογώνιο) ελέγχονται χρησιμοποιώντας την ιδιότητα μετάβασης. Για να δούμε λοιπόν πώς λειτουργούν αυτά τα εφέ, δημιουργήσαμε ένα div στη σελίδα HTML:
Αφού το κάνετε αυτό, ορίστε το πλάτος και το ύψος του (έτσι έχει διαστάσεις), το χρώμα του φόντου του (για να μπορούμε να το δούμε) και τις ιδιότητες εφέ του.
Η ιδιότητα μετάβασης έχει τρεις τιμές: ιδιότητες στη μετάβαση (στην περίπτωσή μας όλες), την ταχύτητα της μετάβασης (στην περίπτωσή μας 0,3 δευτερόλεπτα) και μια τρίτη τιμή που σας επιτρέπει να αλλάξετε τον τρόπο υπολογισμού της επιτάχυνσης και της επιβράδυνσης, αλλά εμείς Θα παραμείνουμε στις προεπιλεγμένες ρυθμίσεις, αφήνοντας αυτό το πεδίο είναι κενό.
Τώρα το μόνο που έχουμε να κάνουμε είναι να αλλάξουμε τις ιδιότητες και θα δημιουργήσουν το animation για εμάς.
Εάν θέλετε να συνεχίσετε μόνοι σας, τότε τα αρχεία επίδειξης είναι για εσάς.
1. Θαμπό
Τα εφέ σκουρότητας είναι ένα αρκετά κοινό αίτημα από τους πελάτες. Αυτός είναι ένας πολύ καλός τρόπος για να τονίσετε τη λειτουργικότητα ή να τονίσετε μια παρότρυνση για δράση.
Το εφέ κωδικοποιείται σε δύο στάδια: πρώτον, ορίζετε την αρχική κατάσταση. Στη συνέχεια, ορίστε την αλλαγή, για παράδειγμα, με το ποντίκι:
Fade ( αδιαφάνεια:0,5; ) .fade:hover ( αδιαφάνεια:1; )
(Βεβαιωθείτε ότι έχετε δώσει στο div σας μια κλάση "fade" για να δείτε πώς λειτουργεί.)
2. Αλλαγή χρώματος
Προηγουμένως, η κίνηση των αλλαγών χρώματος ήταν μια απίστευτα περίπλοκη προσπάθεια, που περιελάμβανε μαθηματικά που εμπλέκονταν στον υπολογισμό των μεμονωμένων τιμών RGB και στη συνέχεια στον επανασυνδυασμό τους. Τώρα απλώς ορίζουμε το div στην κλάση "color" και ορίζουμε το χρώμα που θέλουμε στο CSS:
Χρώμα:Hover ( φόντο:#53a7ea; )
3. Μεγέθυνση και συστολή
Μια φορά κι έναν καιρό, για να κάνετε ένα στοιχείο μεγαλύτερο, έπρεπε να χρησιμοποιήσετε το πλάτος και το ύψος του ή μια ρύθμιση padding. Αλλά τώρα μπορούμε να χρησιμοποιήσουμε τον μετασχηματισμό CSS3 για να τον αυξήσουμε.
Ρυθμίστε την κλάση του div σας σε "grow" και, στη συνέχεια, προσθέστε αυτόν τον κώδικα στο στυλ του μπλοκ σας:
Grow:hover ( -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); )
Η συρρίκνωση ενός στοιχείου είναι τόσο εύκολη όσο και η μεγαλύτερη. Για να αυξήσουμε ένα στοιχείο καθορίζουμε μια τιμή μεγαλύτερη από 1, για να τη μειώσουμε καθορίζουμε μια τιμή μικρότερη από 1:
Shrink:hover ( -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); )
4. Στρέψη στοιχείων
Το CSS παρέχει έναν αριθμό μετασχηματισμών και ένας από τους καλύτερους είναι η στρέψη στοιχείων. Δώστε στο div σας μια κλάση "rotate" και προσθέστε τις ακόλουθες γραμμές στο CSS σας:
Σας παρουσιάζουμε μια νέα πορεία από την ομάδα Το Codeby- "Δοκιμή διείσδυσης εφαρμογών Ιστού από την αρχή." Γενική θεωρία, προετοιμασία εργασιακού περιβάλλοντος, παθητικό fuzzing και fingerprinting, Active fuzzing, Vulnerabilities, Post-exploitation, Tools, Social Engineering και πολλά άλλα.
Rotate:hover ( -webkit-transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); Transform: rotateZ(-30deg); )
5. Μετατρέποντας ένα τετράγωνο σε κύκλο
Στις μέρες μας το αποτέλεσμα της μετατροπής ενός τετράγωνου στοιχείου σε στρογγυλό και αντίστροφα είναι πολύ δημοφιλές. Με το CSS αυτό είναι εύκολο να επιτευχθεί, απλώς μεταφέρουμε την ιδιότητα ακτίνας περιγράμματος. Απλώς θα χρησιμοποιήσουμε την ιδιότητα border-radius.
Δώστε στο div σας μια τάξη "κύκλος" και προσθέστε αυτές τις γραμμές στα φύλλα στυλ σας:
Κύκλος:Τοποθέτηση (περίγραμμα-ακτίνα:50%; )
6. 3D σκιά
Οι τρισδιάστατες σκιές αποδοκιμάζονται εδώ και ένα χρόνο περίπου επειδή δεν ταιριάζουν με την επίπεδη σχεδίαση, αυτό είναι φυσικά ανοησία, λειτουργούν φανταστικά καλά, δίνοντας στον χρήστη την αίσθηση της συμμετοχής τόσο στην επίπεδη σχεδίαση όσο και στην ψευδοτρισδιάστατη διεπαφή.
Αυτό το εφέ επιτυγχάνεται προσθέτοντας ένα ορθογώνιο σκιάς και στη συνέχεια μετακινώντας το στοιχείο στον άξονα x αλλάζοντας τις ιδιότητες μετασχηματισμού και μετάφρασης έτσι ώστε το στοιχείο να φαίνεται να αναπτύσσεται έξω από την οθόνη.
Δώστε στο div σας την κλάση "threed" και, στη συνέχεια, προσθέστε τον ακόλουθο κώδικα στο CSS σας:
Threed:hover ( box-shadow: 1px 1px #53a7ea, 2px 2px #53a7ea, 3px 3px #53a7ea; -webkit-transform: translateX(-3px); Translate: translateX(-3px); )
7. Λούνισμα
Δεν χρησιμοποιούν όλα τα στοιχεία την ιδιότητα μετάβασης. Μπορούμε επίσης να δημιουργήσουμε πολύ περίπλοκα κινούμενα σχέδια χρησιμοποιώντας @keyframes, κινούμενα σχέδια και κινούμενα σχέδια επανάληψης.
Σε αυτήν την περίπτωση, θα ορίσουμε πρώτα τα κινούμενα σχέδια CSS στα στυλ. Θα παρατηρήσετε ότι λόγω προβλημάτων εφαρμογής, πρέπει να χρησιμοποιούμε @-webkit-keyframes καθώς και @keyframes (ναι, ο Internet Explorer είναι στην πραγματικότητα καλύτερος από τον Chrome από αυτή την άποψη τουλάχιστον).
@-webkit-keyframes swing ( 15% ( -webkit-transform: translateX(5px); transformation: translateX(5px); ) 30% ( -webkit-transform: translateX(-5px); transformation: translateX(-5px); ) 50% ( -webkit-transform: translateX(3px); transformation: translateX(3px); ) 65% ( -webkit-transform: translateX(-3px); transformation: translateX(-3px); ) 80% ( -webkit -transform: translateX(2px); transformation: translateX(2px); ) 100% ( -webkit-transform: translateX(0); transform: translateX(0); ) ) @keyframes swing ( 15% ( -webkit-transform: translateX(5px); μετασχηματισμός: translateX(5px); ) 30% ( -webkit-transform: translateX(-5px); transform: translateX(-5px); ) 50% ( -webkit-transform: translateX(3px); : translateX(3px); ) 65% ( -webkit-transform: translateX(-3px); transform: translateX(-3px); ) 80% ( -webkit-transform: translateX(2px); transformation: translateX(2px); ) 100% ( -webkit-transform: translateX(0); transformation: translateX(0); ) )
8. Εισαγωγή περιγράμματος
Ένα από τα πιο δημοφιλή στυλ κουμπιών αυτή τη στιγμή είναι το κουμπί φάντασμα. κουμπί χωρίς φόντο και έντονα περίγραμμα. Μπορούμε, φυσικά, απλώς να προσθέσουμε ένα περίγραμμα στο στοιχείο, αλλά αυτό θα αλλάξει τη θέση του στοιχείου. Θα μπορούσαμε να λύσουμε αυτό το πρόβλημα χρησιμοποιώντας μεγέθη κουτιών, αλλά μια πολύ πιο απλή λύση είναι η μετάβαση στο περίγραμμα με την εισαγωγή μιας σκιάς.
Δώστε στην περίπτωσή σας μια κλάση "border" και προσθέστε το ακόλουθο CSS για τα στυλ σας:
Περίγραμμα:hover ( box-shadow: inset 0 0 0 25px #53a7ea; )
Θέλετε να μάθετε, ; ή ? Όλα αυτά και πολλά άλλα στον ιστότοπο. Εγγραφείτε στο ενημερωτικό μας δελτίο ηλεκτρονικού ταχυδρομείου (στο κάτω μέρος της σελίδας) ή στο και θα είστε οι πρώτοι που θα μάθετε για νέα άρθρα! Γίνετε κι εσείς
