Καλημέρα φίλοι! Αυτό είναι ένα άλλο άρθρο που γράφτηκε μετά από αίτημα ενός από τους αναγνώστες του ιστολογίου μου. Σήμερα θα εφαρμόσουμε τη δυνατότητα εμφάνισης μιας εικόνας όταν τοποθετείτε τον κέρσορα του ποντικιού πάνω από έναν σύνδεσμο. Γιατί μπορεί να είναι απαραίτητο; Όλα είναι πολύ απλά, με αυτόν τον τρόπο μπορείτε να εξοικονομήσετε χώρο στον ιστότοπο και ταυτόχρονα να αναβιώσετε τους συνδέσμους.
Όπως γνωρίζετε, για την εφαρμογή αναδυόμενες εικόνεςδυνατό με Βοήθεια jQuery, CSS και επίσης HTML. Στο σημερινό άρθρο θα αναρτήσω τελειωμένος κωδικόςαυτό το αποτέλεσμα, και επίσης να δώσει μερικά καλά παραδείγματα. Κάθε σενάριο είναι αρκετά απλό, δημιουργήθηκε με χρήση CSS+HTML. Δεν θα σε βασανίσω άλλο και θα σου δώσω έτοιμες λύσεις!
Αναδυόμενη εικόνα στο δείκτη του ποντικιού
a.site-ssilka:hover+div
Επιτρέψτε μου να εξηγήσω εν συντομία τα κύρια σημεία. Για να εμφανίσετε μια αναδυόμενη εικόνα, πρέπει να ανατρέξετε στην ετικέτα
με το χαρακτηριστικό src και μετά το σύμβολο ίσον σε εισαγωγικά, γράψτε τη διαδρομή προς την εικόνα, αφού τη ανεβάσετε στο ριζικό φάκελοιστοσελίδα.
Ετικέτα <а> με την υποχρεωτική παράμετρο href είναι υπεύθυνος για τη δημιουργία και την εμφάνιση ενός συνδέσμου (στο παράδειγμά μου, αυτό είναι κείμενο).
Εάν τα στοιχεία του ιστότοπου έχουν μετακινηθεί, μπορείτε να ορίσετε το πλάτος και το ύψος της εικόνας χρησιμοποιώντας την ιδιότητα πλάτοςκαι ύψος. Οι παράμετροι ορίζονται σε pixel.
Το χαρακτηριστικό alt επιτρέπει στις μηχανές αναζήτησης να αναγνωρίζουν με μεγαλύτερη ακρίβεια αυτό που εμφανίζεται στην εικόνα.
Για λόγους σαφήνειας, έχω επισημάνει το μέρος του κώδικα που πιθανότατα θέλετε να αλλάξετε.
Αναδυόμενο κείμενο όταν τοποθετείτε το δείκτη του ποντικιού πάνω από έναν σύνδεσμο
a.site-ssilka:hover+div
Πιο τολμηρό!!! Περάστε από πάνω μου!
Όπως μπορείτε να δείτε από το παράδειγμα, όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το κείμενο, εμφανίζεται μια επεξήγηση εργαλείου κειμένου.
Εξαφανίζεται εικόνα όταν τοποθετείτε το δείκτη του ποντικιού πάνω από έναν σύνδεσμο
a.site-ssilka:hover+div
Πιο τολμηρό!!! Περάστε από πάνω μου!
Για να προσθέσετε ένα συγκεκριμένο εφέ παραπάνω, απλώς αντιγράψτε τον κώδικα που σας ταιριάζει και επικολλήστε τον επεξεργαστής κειμένου. Έτσι, ένας σύνδεσμος με μια αναδυόμενη / εξαφανιζόμενη εικόνα μπορεί να γραφτεί οπουδήποτε στο άρθρο.
Σημαντικό σημείο!Κάθε ένα από τα σενάρια που παρουσιάζονται δεν βλάπτει την εγκυρότητα του ιστότοπου.
Θεωρώ ότι δεν είναι λιγότερο βολικό να υλοποιήσετε την εργασία προσθέτοντας ένα ειδικό σενάριο στο αρχείο στυλ του προτύπου σας, το οποίο συνήθως ονομάζεται style.css.
Αναδυόμενη εικόνα CSS
θέση: σχετική;
Μικρογραφία:hover(
Εύρος μικρογραφίας ( /*CSS για μεγεθυμένη εικόνα*/
θέση: απόλυτη;
χρώμα φόντου: #3d3d3d;
περίγραμμα: 1px συμπαγές λευκό.
ορατότητα: κρυφό;
κείμενο-διακόσμηση: κανένα;
περίγραμμα-ακτίνα: 4px 4px 4px 4px;
Moz-border-radius: 4px 4px 4px 4px;
Webkit-border-radius: 4px 4px 4px 4px;
Εύρος μικρογραφίας img( /*CSS για μεγεθυμένη εικόνα*/
πλάτος περιγράμματος: 0
Thumbnail:hover span( /*CSS για μεγεθυσμένη εικόνα στο hover*/
ορατότητα: ορατή;
αριστερά: 60 px; /*θέση όπου η μεγεθυμένη εικόνα πρέπει να μετατοπίζεται οριζόντια */
Για να εμφανίσετε ένα αναδυόμενο παράθυρο όταν τοποθετείτε το δείκτη του ποντικιού πάνω από έναν σύνδεσμο, εισαγάγετε τον ακόλουθο σύνδεσμο στο κείμενο:
Επιπλέον, μπορεί να εισαχθεί ένας σύνδεσμος με μια αναδυόμενη εικόνα ορισμένο μέροςτο πρότυπό σας. Για να το κάνετε αυτό, προσθέστε τον ακόλουθο κώδικα στο αρχείο index.php. Αυτό είναι ένα αρχείο που ορίζει την οπτική διάταξη των στοιχείων του ιστότοπου.
Σε περίπτωση που δεν είστε εξοικειωμένοι με το CSS, θα εξηγήσω ότι η καταχώρηση img.animate1:hover λέει στο πρόγραμμα περιήγησης ότι για όλα τα στοιχεία , με ένα χαρακτηριστικό κλάσης ίσο με το animate1, όταν τοποθετείτε τον δείκτη του ποντικιού πάνω τους, εφαρμόστε τα καθορισμένα στυλ. Και τα στυλ καθορίζονται μεταξύ τους άγκιστρα( και ). Εάν όλα γίνονται σωστά, θα πρέπει να μοιάζει κάπως έτσι:
Μπορείτε να τραβήξετε μια φωτογραφία αρχική κατάστασηημιδιαφανές και όταν τοποθετείτε τον δείκτη του ποντικιού πάνω, κάντε το αδιαφανές. Στη συνέχεια, πρέπει να προσθέσετε τις ακόλουθες γραμμές στο αρχείο CSS:
img.animate1(
φίλτρο: άλφα (Αδιαφάνεια=25);
αδιαφάνεια: 0,25
}
img.animate1:hover (
αδιαφάνεια: 1
}
Το αποτέλεσμα θα είναι ως εξής:
Για μεγαλύτερο αποτέλεσμα, μπορείτε να επιβραδύνετε τις αλλαγές στη διαφάνεια της εικόνας. Για να το κάνετε αυτό, μπορείτε να χρησιμοποιήσετε την ιδιότητα μετάβασης CSS, η οποία ορίζει το εφέ μετάβασης μεταξύ δύο καταστάσεων ενός στοιχείου. Για παράδειγμα, ας προσθέσουμε ένα δευτερόλεπτο επιβράδυνσης. Τότε ο κώδικας CSS μας θα μοιάζει με αυτό:
img.animate1(
φίλτρο: άλφα (Αδιαφάνεια=25);
αδιαφάνεια: 0,25
-moz-transition: όλα τα 1s ease-in-out. /* εφέ μετάβασης για τον Firefox πριν από την έκδοση 16.0 */
-webkit-transition: όλα τα 1s ease-in-out. /* εφέ μετάβασης για Chrome έως την έκδοση 26.0, Safari, Android και iOS */
-o-transition: όλα τα 1s ease-in-out. /* εφέ μετάβασης για Opera πριν από την έκδοση 12.10 */
μετάβαση: όλα τα 1s ease-in-out. /* εφέ μετάβασης για άλλα προγράμματα περιήγησης */
}
img.animate1:hover (
φίλτρο: άλφα (Αδιαφάνεια=100);
αδιαφάνεια: 1
}
Αποτέλεσμα:
Χρησιμοποιώντας την ιδιότητα μετασχηματισμού, η εικόνα μπορεί να κλιμακωθεί, να περιστραφεί, να μετατοπιστεί, να γίνει κλίση. Ας προσπαθήσουμε να μεγεθύνουμε την εικόνα. Τότε ο κώδικας css θα είναι ως εξής:
img.animate1(
- o-transition: όλα τα 1s ευκολία.
μετάβαση: όλα 1s ευκολία?
}
img.animate1:hover(
- moz-transform: κλίμακα (1,5); /* εφέ μετασχηματισμού για τον Firefox πριν από την έκδοση 16.0 */
- webkit-transform: κλίμακα (1,5); /* εφέ μετασχηματισμού για Chrome έως την έκδοση 26.0, Safari, Android και iOS */
- o-transform: κλίμακα (1,5); /* εφέ μετασχηματισμού για Opera πριν από την έκδοση 12.10 */
- ms-transform: κλίμακα (1,5); /* εφέ μετασχηματισμού για IE 9.0 */
transform:scale(1.5); /* εφέ μετασχηματισμού για άλλα προγράμματα περιήγησης */
}
Και το αποτέλεσμα θα είναι το εξής:
Μπορεί να προστεθεί περιστροφή για μεγέθυνση της εικόνας. Στη συνέχεια, τα στυλ css αλλάζουν λίγο:
img.animate1(
moz-transition: all 1s ease?
webkit-transition: all 1s ease?
- o-transition: όλα τα 1s ευκολία.
μετάβαση: όλα 1s ευκολία?
}
img.animate1:hover(
- moz-transform: περιστροφή (360 μοίρες) κλίμακα (1,5);
- webkit-transform: περιστροφή (360 μοίρες) κλίμακα (1,5);
- o-transform: περιστροφή (360 μοίρες) κλίμακα (1,5);
- ms-transform: περιστροφή (360 μοίρες) κλίμακα (1,5);
μετασχηματισμός: περιστροφή (360 μοίρες) κλίμακα (1,5);
}
Αποτέλεσμα:
Παραπάνω, εξετάσαμε περιπτώσεις όπου μια εικόνα εμπλέκεται στο animation. Στη συνέχεια, σκεφτείτε πώς να αντικαταστήσετε μια εικόνα με μια άλλη. Σε αυτήν την περίπτωση, συνήθως προετοιμάζονται δύο εικόνες του ίδιου μεγέθους: η μία για την αρχική προβολή και η άλλη για την αντικατάστασή της.
Ας πούμε ότι έχουμε δύο εικόνες, μια ασπρόμαυρη και η άλλη έγχρωμη:
Ας το κάνουμε έτσι ώστε όταν τοποθετείτε το δείκτη του ποντικιού πάνω από μια ασπρόμαυρη εικόνα, να εμφανίζεται μια έγχρωμη εικόνα. Για να γίνει αυτό, θα κάνουμε την αρχική εικόνα το φόντο του στοιχείου div χρησιμοποιώντας την ιδιότητα φόντου. Και όταν τοποθετείτε το δείκτη του ποντικιού πάνω από την εικόνα του δρομέα, θα αλλάξουμε εικόνα φόντουχρησιμοποιώντας την ίδια ιδιότητα ψευδοκλάσης και φόντου hover. Για να εφαρμόσετε αυτό το αποτέλεσμα στο σελίδα htmlπροσθέστε ένα στοιχείο div με την κλάση rotate1:
Και προσθέστε τις ακόλουθες περιγραφές στυλ:
div.rotate1(
φόντο: url (img/2.jpg); /* Διαδρομή προς το αρχείο με την αρχική εικόνα */
πλάτος: 480 px /* Πλάτος της εικόνας */
ύψος: 360px; /* Ύψος εικόνας */
}
div.rotate1:hover (
φόντο: url (img/1.jpg); /* Διαδρομή προς το αρχείο με την αντικατεστημένη εικόνα */
}
Και το αποτέλεσμα:
Αυτή η μέθοδος έχει ένα σημαντικό μειονέκτημα. Εφόσον η δεύτερη εικόνα φορτώνεται μόνο όταν τοποθετείται ο κέρσορας, εάν ο χρήστης έχει αργή σύνδεση στο Διαδίκτυο και το μέγεθος του αρχείου με την εικόνα είναι μεγάλο, η εικόνα θα εμφανίζεται με παύση. Επομένως, παρακάτω θα εξετάσουμε μερικούς ακόμη τρόπους αντικατάστασης εικόνων όταν τοποθετείτε τον κέρσορα του ποντικιού.
Η επόμενη μέθοδος θα βασίζεται στο συνδυασμό δύο εικόνων σε ένα αρχείο. Ας υποθέσουμε ότι πρέπει να τοποθετήσουμε ένα κουμπί στη σελίδα, το οποίο, όταν τοποθετηθεί ο δείκτης του ποντικιού πάνω της, θα άλλαζε την εμφάνισή του. Για να γίνει αυτό, συνδυάζουμε δύο εικόνες σε ένα αρχείο και η εικόνα που προκύπτει θα μοιάζει κάπως έτσι:
Σε αυτή την περίπτωση, η αλλαγή από το ένα μοτίβο στο άλλο θα πραγματοποιηθεί με μετατόπιση εικόνα φόντουκατακόρυφα χρησιμοποιώντας την ιδιότητα background-position. Δεδομένου ότι όταν κάνετε κλικ στο κουμπί, πηγαίνετε συνήθως σε άλλη σελίδα, θα εισάγουμε την εικόνα στο στοιχείο< a>. Στη συνέχεια, επικολλήστε τον ακόλουθο κώδικα στη σελίδα html:
Και σε ένα αρχείο css όπως αυτό:
a.rotate2(
φόντο: url (img/button.png); /* Διαδρομή προς το αρχείο με την αρχική εικόνα */
display:block; /* Σύνδεσμος ως στοιχείο μπλοκ */
πλάτος: 50 px /* Πλάτος εικόνας σε pixel */
ύψος: 30 px; /* Ύψος εικόνας */
}
a.rotate2:hover(
φόντο-θέση: 0-30 px; /* Μετατόπιση φόντου */
}
Αποτέλεσμα:
Και ο τελευταίος τρόπος για σήμερα είναι όταν μια εικόνα τοποθετείται κάτω από μια άλλη με cssθέση: απόλυτοι κανόνες. Σε αυτήν την περίπτωση, βάζουμε δύο εικόνες μέσα στο κοντέινερ div:
Και προσθέστε στυλ css:
Animate2(
θέση:συγγενής;
margin:0 auto;/* ορίστε το μπλοκ div στο κέντρο της σελίδας*/
πλάτος: 480 px; /* Πλάτος */
ύψος: 360px; /* Υψος */
}
.animate2 img(
θέση:απόλυτη; /* απόλυτη τοποθέτηση*/
αριστερά: 0; /* στοίχιση εικόνων προς τα αριστερά πάνω γωνιάπρώτη αοιδός μελοδράματος*/
κορυφή: 0; /* στοίχιση των εικόνων στην επάνω αριστερή γωνία του div */
}
Μετά την προσθήκη των κανόνων css, οι εικόνες θα τοποθετηθούν η μία κάτω από την άλλη. Τώρα ελέγχεται η διαφάνεια των εικόνων με ιδιότητες αδιαφάνειαςστην κανονική κατάσταση, θα δείξουμε τη δεύτερη εικόνα και όταν τοποθετήσετε το δείκτη του ποντικιού πάνω από την πρώτη. Για να γίνει αυτό, στην κανονική κατάσταση, κάνουμε την εικόνα με την πρώτη κλάση εντελώς διαφανή και όταν τοποθετείτε τον κέρσορα, ισχύει το αντίθετο: η εικόνα με τη δεύτερη κλάση θα είναι εντελώς διαφανής και με την πρώτη κλάση θα είναι να μην είναι διαφανής:
Animate2 img.first ( /* η πρώτη εικόνα είναι πλήρως διαφανής */
αδιαφάνεια:0;
φίλτρο:άλφα (αδιαφάνεια=0);
}
.animate2:hover img.first ( /* η πρώτη εικόνα γίνεται αδιαφανής με το hover */
αδιαφάνεια:1;
φίλτρο:άλφα (αδιαφάνεια=100);
}
/* και το δεύτερο γίνεται διαφανές με το hover */
αδιαφάνεια:0;
φίλτρο:άλφα (αδιαφάνεια=0);
}
Αποτέλεσμα:
Μπορείτε να επιτύχετε μια ομαλή μετάβαση προσθέτοντας την ιδιότητα μετάβασης CSS στον τελευταίο κανόνα:
Animate2:hover img.second, .animate2 img.second:hover (
αδιαφάνεια:0;
φίλτρο:άλφα (αδιαφάνεια=0);
-moz-transition: όλα τα 2s ease?
-webkit-transition: όλα τα 2s ease.
-o-transition: όλα τα 2s ease?
μετάβαση: όλα τα 2s ευκολία?
}
Και το αποτέλεσμα:
Και αν προσθέσουμε την ιδιότητα μετασχηματισμού:
Animate2:hover img.second, .animate2 img.second:hover (
αδιαφάνεια:0;
φίλτρο:άλφα (αδιαφάνεια=0);
-moz-transform:scale(0, 1);
-webkit-transform:scale(0, 1);
-o-transform:scale(0, 1);
-ms-transform:scale(0, 1);
transform:scale(0, 1); /* μειώστε το πλάτος της εικόνας στο 0 */
}
Θα βγει ως εξής:
Συνδυάζοντας διαφορετικές ιδιότητες CSS, μπορείτε να επιτύχετε διαφορετικές εφέ αιώρησηςόταν αλλάζετε εικόνες ενώ κρατάτε το ποντίκι. Δημοσίευσα αυτά και άλλα παραδείγματα σε αυτήν τη σελίδα, όπου μπορείτε επίσης να κατεβάσετε τον πηγαίο κώδικα. Αυτό είναι όλο, μέχρι να ξανασυναντηθούμε.
| 18.02.2016
Το CSS3 ανοίγει απεριόριστες δυνατότητες για τους σχεδιαστές διεπαφής χρήστη και το κύριο πλεονέκτημα είναι ότι σχεδόν κάθε ιδέα μπορεί εύκολα να εφαρμοστεί και να υλοποιηθεί χωρίς να καταφύγουμε στη χρήση JavaScript.
Είναι εκπληκτικό το πόσο απλά πράγματα μπορούν να χαρίσουν μια συνηθισμένη ιστοσελίδα, καθιστώντας την πιο προσιτή στους χρήστες. Μιλάμε για μεταβάσεις CSS3, με τις οποίες μπορείτε να επιτρέψετε στο στοιχείο να μεταμορφωθεί και να αλλάξει το στυλ, για παράδειγμα, κατά την αιώρηση. Τα εννέα παραδείγματα κινούμενων εικόνων CSS3 παρακάτω θα σας βοηθήσουν να δημιουργήσετε μια αποκριτική εμπειρία στον ιστότοπό σας, καθώς και να βελτιώσετε τη συνολική εμφάνιση της σελίδας με όμορφες ομαλές μεταβάσεις.
Για πιο αναλυτικές πληροφορίες, μπορείτε να κατεβάσετε το αρχείο με τα αρχεία.
Όλα τα εφέ λειτουργούν με την ιδιότητα μετάβασης. μετάβαση- "transition", "transformation") και μια ψευδο-κλάση: hover , που καθορίζει το στυλ του στοιχείου όταν ο δρομέας του ποντικιού τοποθετείται πάνω του (στο σεμινάριο μας). Για τα παραδείγματά μας, χρησιμοποιήσαμε div 500x309 pixel, αρχικό χρώμα φόντου #6d6d6d και διάρκεια μετάβασης 0,3 δευτερόλεπτα.
Body > div ( πλάτος: 500 px; ύψος: 309 px; φόντο: #6d6d6d; -webkit-transition: all 0.3s ease;; -moz-transition: all 0.3s ease;; -o-transition: all 0.3s ease;; μετάβαση: όλα τα 0,3s ευκολία;)
1. Αλλαγή χρώματος κατά την αιώρηση
Μια φορά κι έναν καιρό, η υλοποίηση ενός τέτοιου εφέ ήταν αρκετά επίπονη δουλειά, με μαθηματικούς υπολογισμούς ορισμένων τιμών RGB. Τώρα αρκεί να γράψω στυλ css, στην οποία πρέπει να προσθέσετε την ψευδοκλάση: τοποθετήστε το δείκτη του ποντικιού στον επιλογέα και ορίστε το χρώμα φόντου, το οποίο θα αντικαταστήσει ομαλά (σε 0,3 δευτερόλεπτα) το αρχικό χρώμα φόντου όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το μπλοκ:
Χρώμα:Hover ( φόντο:#53ea93; )
2. Η εμφάνιση του πλαισίου
Μια ενδιαφέρουσα και φωτεινή μεταμόρφωση είναι το εσωτερικό πλαίσιο που εμφανίζεται ομαλά όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το ποντίκι. Καλό για τη διακόσμηση διαφόρων κουμπιών. Για να επιτύχουμε αυτό το αποτέλεσμα, χρησιμοποιούμε την ψευδο-κλάση :hover και την ιδιότητα box-shadow με την παράμετρο inset (ορίζει τη σκιά μέσα στο στοιχείο). Επιπλέον, θα χρειαστεί να ρυθμίσετε την έκταση σκιάς (στην περίπτωσή μας είναι 23 εικονοστοιχεία) και το χρώμα της:
Περίγραμμα:Hover (box-shadow: inset 0 0 0 23px #53ea93; )
3. Κούνια
Αυτή η κίνηση CSS αποτελεί εξαίρεση, καθώς η ιδιότητα μετάβασης δεν χρησιμοποιείται εδώ. Αντίθετα χρησιμοποιήσαμε:
- Το @keyframes είναι μια βασική οδηγία για τη δημιουργία ενός κινούμενου σχεδίου CSS καρέ-καρέ που σας επιτρέπει να κάνετε τα λεγόμενα. σενάριο και περιγράψτε το κινούμενο σχέδιο ως μια λίστα με βασικά σημεία.
- animation και animation-iteration-count - ιδιότητες για τη ρύθμιση των παραμέτρων κινούμενων εικόνων (διάρκεια και ταχύτητα) και τον αριθμό των κύκλων (επαναλήψεις). Στην περίπτωσή μας, επαναλάβετε το 1.
4. Φθορά
Ένα φαινόμενο εξασθένισης είναι βασικά απλώς η αλλαγή της διαφάνειας ενός στοιχείου. Το κινούμενο σχέδιο δημιουργείται σε δύο στάδια: πρώτα πρέπει να ορίσετε την αρχική κατάσταση διαφάνειας σε 1 - δηλαδή πλήρη αδιαφάνεια και, στη συνέχεια, να καθορίσετε την τιμή του όταν τοποθετείτε το ποντίκι - 0,6:
Fade ( αδιαφάνεια: 1; ) .fade:hover ( αδιαφάνεια: 0,6; )
Για το αντίθετο αποτέλεσμα, αλλάξτε τις τιμές:
5. Ζουμ
Για να μεγαλώσει το πλαίσιο κατά την αιώρηση, θα χρησιμοποιήσουμε την ιδιότητα μετασχηματισμού και θα ορίσουμε την τιμή του σε κλίμακα(1.2) . Σε αυτήν την περίπτωση, το μπλοκ θα αυξηθεί κατά 20 τοις εκατό διατηρώντας τις αναλογίες του:
Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )
6. Μείωση
Η μείωση ενός στοιχείου είναι εξίσου εύκολη με την αύξηση του. Αν στην πέμπτη παράγραφο, για να αυξήσουμε την κλίμακα, χρειαζόμασταν να καθορίσουμε μια τιμή μεγαλύτερη από 1, τότε για να μειώσουμε το μπλοκ, προσδιορίζουμε απλώς μια τιμή που θα είναι μικρότερη από ένα, για παράδειγμα, scale(0.7) . Τώρα, όταν τοποθετείτε το ποντίκι, το μπλοκ θα μειωθεί αναλογικά κατά 30 τοις εκατό του αρχικού του μεγέθους:
Shrink:hover ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )
7. Μεταμόρφωση σε κύκλο
Ένα κινούμενο σχέδιο που χρησιμοποιείται συνήθως είναι ένα ορθογώνιο στοιχείο που μετατρέπεται σε κύκλο όταν τοποθετείται πάνω του. Χρήση της ιδιοκτησίας css σύνορα-ακτίνα, που χρησιμοποιείται σε συνδυασμό με :hover και transition, αυτό μπορεί να εφαρμοστεί χωρίς προβλήματα:
Κύκλος: αιώρηση (ακτίνα περιγράμματος: 70%; )
8. Περιστροφή
Μια αστεία επιλογή κινουμένων σχεδίων είναι η περιστροφή ενός στοιχείου κατά έναν ορισμένο αριθμό μοιρών. Για να γίνει αυτό, χρειαζόμαστε και πάλι την ιδιότητα μετασχηματισμού, αλλά με διαφορετική τιμή - rotateZ(20deg) . Με αυτές τις παραμέτρους, το μπλοκ θα περιστραφεί κατά 20 μοίρες δεξιόστροφα σε σχέση με τον άξονα Z:
Rotate:hover ( -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transformation: rotateZ(20deg); )
9. τρισδιάστατη σκιά
Οι σχεδιαστές διαφωνούν για το αν αυτό το εφέ είναι κατάλληλο σε επίπεδο σχέδιο. Ωστόσο, αυτό το κινούμενο σχέδιο CSS3 είναι αρκετά πρωτότυπο και χρησιμοποιείται επίσης σε ιστοσελίδες. Θα επιτύχουμε ένα τρισδιάστατο εφέ χρησιμοποιώντας τις ιδιότητες box-shadow που είναι ήδη γνωστές σε εμάς (θα δημιουργήσει μια σκιά πολλαπλών επιπέδων) και θα μετασχηματίσουμε με την παράμετρο translateX (-7px) (θα διασφαλίσουμε ότι το μπλοκ θα μετακινηθεί οριζόντια προς τα αριστερά κατά 7 pixel ):
threed:hover ( box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 5px #53ea93, 6px 5px #53ea93, 6px 5px #53ea93, 6px 5px #53ea93, 6px 5px #53ea93, 6px 5px #53ea93, 6px 3px #53ea93, 6px 3px #53ea93, 6px 3px #53ea93 -7px); transformation: translateX(-7px); )
Υποστήριξη προγράμματος περιήγησης
Η ιδιότητα μετάβασης υποστηρίζεται αυτήν τη στιγμή από τα ακόλουθα προγράμματα περιήγησης:
| Προγράμματα περιήγησης για επιτραπέζιους υπολογιστές | |
|---|---|
| Internet Explorer | Υποστηρίζεται από IE 10 και άνω |
| Χρώμιο | Υποστηρίζεται από την έκδοση 26 (πριν η έκδοση 25 λειτουργήσει με το πρόθεμα -webkit-) |
| Firefox | Υποστηρίζεται από την έκδοση 16 (στις εκδόσεις 4-15 λειτουργεί με πρόθεμα -moz-) |
| ΛΥΡΙΚΗ ΣΚΗΝΗ | Υποστηρίζεται από την έκδοση 12.1 |
| σαφάρι | Υποστηρίζεται από την έκδοση 6.1 (στις εκδόσεις 3.1-6 λειτουργεί με πρόθεμα -webkit) |
Οι υπόλοιπες ιδιότητες που χρησιμοποιούνται σε αυτά τα παραδείγματα, όπως το transform , το box-shadow κ.λπ., υποστηρίζονται επίσης από σχεδόν όλα τα σύγχρονα προγράμματα περιήγησης. Ωστόσο, εάν πρόκειται να χρησιμοποιήσετε αυτές τις ιδέες για τα έργα σας, συνιστούμε ανεπιφύλακτα να ελέγξετε ξανά τη συμβατότητα μεταξύ προγραμμάτων περιήγησης.
Ελπίζουμε αυτά τα παραδείγματα κινούμενων σχεδίων CSS3 να σας βοήθησαν. Σας ευχόμαστε δημιουργική επιτυχία!
Πριν ασχοληθούμε με τα κουμπιά, ας δούμε τις ρυθμίσεις που είναι κοινές σε όλα αυτά.
HTML
Για κουμπιά θα χρησιμοποιηθούν πολύ απλό htmlο κώδικας:
Εγγραφείτε
css
Επίσης όλα τα κουμπιά θα έχουν Γενικές Ρυθμίσειςγια το κείμενο της επιγραφής και την κατάργηση επιλογής συνδέσμων:
ButtonText ( γραμματοσειρά: 18 px/1,5 Helvetica, Arial, sans-serif; χρώμα: #fff; ) a ( χρώμα: #fff; κείμενο-διακόσμηση: κανένα; )
Συνήθως, ο χρήστης αναμένει ένα αρκετά ήπιο αποτέλεσμα όταν τοποθετεί το ποντίκι πάνω από έναν σύνδεσμο ή ένα κουμπί. Και στην περίπτωσή μας, το κουμπί αλλάζει μέγεθος - αυξάνεται, εμφανίζοντας ένα πρόσθετο μήνυμα.
Κύριος κώδικας CSS
Αρχικά, χρειάζεται μόνο να δώσουμε στο κουμπί ένα σχήμα και ένα χρώμα. Ορίστε ύψος 28 εικονοστοιχεία και πλάτος 115 εικονοστοιχεία, προσθέστε περιθώρια και γέμιση και δώστε στο κουμπί ένα ανοιχτό περίγραμμα.
#button1 (φόντο: #6292c2; περίγραμμα: 2px συμπαγές #eee; ύψος: 28px; πλάτος: 115px; περιθώριο: 50px 0 0 50px; padding: 0 0 0 7px; υπερχείλιση: κρυφό; εμφάνιση: block; )
Εφέ CSS3
Σε κάποιους αρέσει όταν ένα απλό κουμπί συνοδεύεται από αρκετό κώδικα CSS. ΣΤΟ αυτός ο τομέαςπαρέχει πρόσθετα στυλ CSS3 για το κουμπί μας. Μπορείτε να τα κάνετε χωρίς αυτά, αλλά δίνουν στο κουμπί μια πιο μοντέρνα εμφάνιση.
Στρογγυλοποιήστε τις γωνίες του πλαισίου και προσθέστε μια κλίση. Εδώ είναι ένα μικρό κόλπο σκοτεινής κλίσης που λειτουργεί με οποιοδήποτε χρώμα φόντου.
/*Στρογγυλεμένες γωνίες*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; ακτίνα περιγράμματος: 15 εικονοστοιχεία; /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); φόντο-εικόνα: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); φόντο-εικόνα: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); εικόνα φόντου: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); φόντο-εικόνα: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
CSS Animation
Τώρα ας εγκαταστήσουμε Μετάβαση CSS. Το animation θα χρησιμοποιηθεί για τυχόν αλλαγές ιδιοτήτων και θα διαρκέσει μισό δευτερόλεπτο.
Το ποντίκι αιωρείται
Απομένει μόνο να προσθέσετε ένα στυλ για να επεκτείνετε το κουμπί όταν τοποθετείτε το δείκτη του ποντικιού πάνω του με το ποντίκι. Το κουμπί πρέπει να έχει πλάτος 230 px για να εμφανιστεί ολόκληρη η ανάρτηση.
#button1:hover (πλάτος: 230px; )
Εύκολη αλλαγή χρωματικού τόνου
Ένα πολύ απλό και δημοφιλές εφέ CSS για ένα κουμπί. Όταν μετακινείτε τον κέρσορα του ποντικιού αλλάζει ομαλά τον τόνο του χρώματος του φόντου.
Κύριος κώδικας CSS
Ο κώδικας CSS είναι πολύ παρόμοιος με το προηγούμενο παράδειγμα. Χρησιμοποιείται διαφορετικό χρώμα φόντου και το σχήμα τροποποιείται ελαφρώς. Το κείμενο είναι επίσης κεντραρισμένο και το ύψος γραμμής για το κουμπί έχει ρυθμιστεί έτσι ώστε να είναι κατακόρυφα στο κέντρο.
#button2 ( φόντο: #d11717; περίγραμμα: 2px συμπαγές #eee; ύψος: 38px; πλάτος: 125px; περιθώριο: 50px 0 0 50px; υπερχείλιση: κρυφό; οθόνη: μπλοκ; στοίχιση κειμένου: κέντρο; ύψος γραμμής: 38px; )
Εφέ CSS3
Ρυθμίστε τη στρογγυλοποίηση των γωνιών, την κλίση για το φόντο και την πρόσθετη σκιά. Χρησιμοποιώντας το rgba κάνουμε τη σκιά μαύρη και διάφανη.
/*Στρογγυλεμένες γωνίες*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; ακτίνα περιγράμματος: 10 εικονοστοιχεία /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); φόντο-εικόνα: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); φόντο-εικόνα: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); εικόνα φόντου: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); φόντο-εικόνα: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
CSS Animation
Το κινούμενο σχέδιο είναι πρακτικά το ίδιο με το προηγούμενο παράδειγμα.
/*Transition*/ -webkit-transition: Όλα τα 0,5s ease; -moz-transition: Όλα τα 0,5s ευκολία? -o-transition: Όλα τα 0,5s ευκολία? -ms-transition: Όλα τα 0,5s ευκολία? μετάβαση: Όλα τα 0,5 δευτερόλεπτα ευκολία.
Το ποντίκι αιωρείται
Όταν τοποθετείτε τον κέρσορα του ποντικιού, θα οριστεί διαφορετικό χρώμα φόντου. Δοκιμάστε να επιλέξετε μια επιλογή πιο ανοιχτού χρώματος στο Photoshop για υπέροχο αποτέλεσμα.
#button2:hover (χρώμα φόντου: #ff3434; )
Αυτό το εφέ μπορεί να είναι αρκετά εντυπωσιακό ανάλογα με την επιλογή της εικόνας φόντου. Η επίδειξη χρησιμοποιεί ένα μη περιγραφικό φόντο και το εφέ φαίνεται μη περιγραφικό. Δοκιμάστε να χρησιμοποιήσετε μια διαφορετική εικόνα και μπορεί να καταλήξετε με ένα εκπληκτικό αποτέλεσμα.
Κύριος κώδικας CSS
Το κύριο μέρος του κώδικα είναι το ίδιο με τα προηγούμενα παραδείγματα. Σημειώστε ότι χρησιμοποιούμε μια εικόνα φόντου. Η αρχική θέση του φόντου έχει οριστεί σε "0 0". Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από τον κέρσορα, η θέση μετατοπίζεται κατακόρυφα.
#button3 ( φόντο: #d11717 url("bkg-1.jpg"); θέση φόντου: 0 0; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); μέγεθος γραμματοσειράς: 22px; ύψος : 58 εικονοστοιχεία, πλάτος: 155 εικονοστοιχεία, περιθώριο: 50 εικονοστοιχεία 0 0 50 εικονοστοιχεία, υπερχείλιση: κρυφή, οθόνη: μπλοκ, στοίχιση κειμένου: κέντρο, ύψος γραμμής: 58 εικονοστοιχεία, )
Εφέ CSS3
Σε αυτό το παράδειγμα, δεν υπάρχει τίποτα το ιδιαίτερο - στρογγυλεμένες γωνίες και σκιές.
/*Στρογγυλεμένες γωνίες*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; ακτίνα περιγράμματος: 5 εικονοστοιχεία /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
CSS Animation
Το animation για αυτήν την περίπτωση είναι μεγαλύτερο για να δημιουργήσει ένα ομαλό και ενδιαφέρον εφέ.
/*Transition*/ -webkit-transition: Όλα τα 0,8s ease; -moz-transition: Όλα τα 0,8s ease. -o-transition: Όλα τα 0,8s ευκολία? -ms-transition: Όλα τα 0,8s ευκολία? μετάβαση: Όλα τα 0,8s ευκολία?
Το ποντίκι αιωρείται
Τώρα ήρθε η ώρα να μετακινήσετε την εικόνα φόντου. Η αρχική θέση ήταν "0 0". Ορίστε τη δεύτερη παράμετρο σε 150 px. Για οριζόντια μετατόπιση, πρέπει να αλλάξετε την πρώτη παράμετρο.
#button3:hover (θέση φόντου: 0px 150px; )
Τρισδιάστατο πάτημα κουμπιού προσομοίωσης
Το τελευταίο παράδειγμα στο σεμινάριο μας εστιάζει στη δημοφιλή τρισδιάστατη μέθοδο προσομοίωσης ενός κλικ κουμπιού όταν τοποθετείτε το δείκτη του ποντικιού πάνω του με το ποντίκι. Το animation για αυτήν την περίπτωση είναι τόσο απλό που δεν απαιτεί καν μετάβαση CSS. Το τελικό αποτέλεσμα όμως είναι αρκετά εντυπωσιακό.
Κύριος κώδικας CSS
Κωδικός CSS για το κουμπί μας.
#button4 ( φόντο: #5c5c5c; κείμενο-σκιά: 0px 2px 0px rgba(0, 0, 0, 0.3); μέγεθος γραμματοσειράς: 22px; ύψος: 58px; πλάτος: 155px; περιθώριο: 50px 0 0 πάνω από 50px; ; οθόνη: μπλοκ, στοίχιση κειμένου: κέντρο, ύψος γραμμής: 58 εικονοστοιχεία; )
Εφέ CSS3
Σε αυτήν την περίπτωση, το CSS3 δεν είναι πλέον καλή επιλογή. Απαιτούνται σκιές και μια κλίση για να έχετε το αποτέλεσμα. Η σκληρή σκιά δημιουργεί την εμφάνιση ενός κουμπιού 3D.
/*Στρογγυλεμένες γωνίες*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; ακτίνα περιγράμματος: 5 εικονοστοιχεία /*Shadow*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0,8); box-shadow: 0px 6px 0px rgba(0, 0, 0, 0,8); /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); φόντο-εικόνα: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); φόντο-εικόνα: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); εικόνα φόντου: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); φόντο-εικόνα: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
Το ποντίκι αιωρείται
Σε αυτή την περίπτωση, έχουμε το μεγαλύτερο τμήμα αιώρησης. Το μήκος της σκιάς μειώνεται και τα περιθώρια δημιουργούν μια ανάμειξη της σκοτεινής ζώνης. Όλα μαζί δημιουργούν την ψευδαίσθηση του πατήματος ενός κουμπιού. Η αναστροφή της κλίσης ενισχύει το αποτέλεσμα.
#button4:hover ( margin-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0 , 0, 0, 0.8); box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); εικόνα φόντου: -moz-linear-gradient(κάτω, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4 )); εικόνα φόντου: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); εικόνα φόντου: -ms-linear-gradient( κάτω, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); εικόνα φόντου: γραμμική διαβάθμιση (κάτω, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4));)