Δημιουργήστε ένα εφέ απεικόνισης εικόνας μόνο για CSS με διαφανή περιγράμματα
ΕΝΑ Μόνο το αποτέλεσμα της αποκάλυψης εικόνας CSS μπορεί να λυθεί με διαφορετικούς τρόπους. Είναι πραγματικά πολύ εύκολο να κωδικοποιήσετε ένα σχέδιο στο οποίο το η εικόνα ξεχωρίζει (υπερχειλείται από) το στερεό του υπόβαθρο -απλά τοποθετήστε μια εικόνα πάνω από ένα μικρότερο στοιχείο με ένα στερεό υπόβαθρο.
Μπορείτε να πάρετε το ίδιο αποτέλεσμα αν χρησιμοποιείτε διαφανή σύνορα, όπου κρατάτε το μέγεθος του στοιχείου φόντου το ίδιο όπως αυτή των νέων στοιχείων και να προσθέσει διαφανή σύνορα για να δημιουργήστε έναν κενό χώρο για να ξεπεράσει το προσκήνιο.
Υπάρχουν μερικά πλεονεκτήματα στη χρήση της τελευταίας μεθόδου. Δεδομένου ότι είναι τα διαφανή σύνορα που παρέχουν στην περιοχή το προσκήνιο για να ξεπεράσει, μπορούμε ελέγξτε την κατεύθυνση της υπερχείλισης ανάμεσα στα αριστερά, δεξιά, πάνω και κάτω σύνορα. Επίσης, έχοντας το ίδιο μέγεθος τόσο για το προσκήνιο όσο και για το φόντο καθιστά ευκολότερη την ταυτόχρονη μετακίνηση και των δύο στοιχείων σε όλη τη σελίδα.
Με λίγα λόγια, θα δούμε πώς να το κάνουμε δημιουργήστε ένα αποτέλεσμα αποκάλυψης εικόνας μόνο για το CSS χρησιμοποιώντας ένα μικρό στερεό υπόβαθρο με εικόνα στο προσκήνιο που έχει διαφανή σύνορα. Μπορείτε να δείτε το τελική επίδειξη παρακάτω.
1. Δημιουργήστε τον αρχικό κώδικα
HTML-wise, μόνο ένα Στο CSS, χρησιμοποιούμε δύο μεταβλητές CSS, Προσθέτουμε επίσης το Εμείς προσθέστε κενό ο Προσθέτουμε την εικόνα στο ο Στο παρακάτω εικόνα μπορείτε να δείτε τι έχουμε μέχρι στιγμής ( Για να προσθέσετε το μικρότερο (slide-out) φόντο πίσω από την εικόνα, θα χρησιμοποιήσουμε το άλλο ψευδο-στοιχείο, Δημιουργούμε μια άλλη μεταβλητή CSS, ο πλάτος υπολογίζεται ως ο ύψος υπολογίζεται ως Με το Ένα φίλτρο CSS του Εδώ είναι το screenshot του demo μέχρι στιγμής (με Εμείς πρόσθεσε το Οπως εμείς έχει ήδη προσθέσει το Παρακάτω, μπορείτε να δείτε το τελική επίδειξη. Εάν εμφανίζετε
--bgc και --αμυδρός για το χρώμα φόντου και το διαστάσεις απο .foo δοχείο, αντίστοιχα. Στο παράδειγμα, χρησιμοποίησα το ίδια αξία για το πλάτος και το ύψος για να πάρει ένα τετράγωνο κουτί, δημιουργήστε ξεχωριστές μεταβλητές για το ύψος και το πλάτος, αν θέλετε ένα ορθογώνιο.θέση: σχετική καν να .foo, έτσι ώστε τα ψευδο-στοιχεία του, για τα οποία θα χρησιμοποιήσουμε αποκαλύπτοντας την εικόνα, μπορεί να είναι σε απόλυτη θέση (βλ. παρακάτω), και έτσι στοιβάζονται το ένα πάνω στο άλλο. .foo -bgc: # FFCC03; --dim: 300px; πλάτος: var (- dim); ύψος: var (- dim); χρώμα φόντου: var (- bgc); θέση: σχετική.
περιεχόμενο ιδιοκτησία και στα δύο ψευδο-στοιχεία, .foo :: πριν και .foo :: μετά, για να τα πάρει σωστά. .foo :: πριν, .foo :: μετά από περιεχόμενο: "; θέση: απόλυτη · αριστερά: 0; κορυφή: 0 ·
.foo στοιχείο, τα δύο ψευδο-στοιχεία του, .foo :: πριν, .foo :: μετά, και τα δικά τους :φτερουγίζω ψευδο-τάξεις να πάρετε μια μετάβαση ιδιοκτησία που θα προσθέστε μια μετάβαση στην ευκολία σε αυτά για 500 χιλιοστά του δευτερολέπτου (μισό δευτερόλεπτο). .foo, .foo: hover, .foo :: πριν, .foo :: μετά, .foo: hover :: πριν, .foo: hover :: μετά από μετάβαση: μετασχηματισμός 500ms ευκολία-in;
2. Προσθέστε την εικόνα
.foo :: πριν ψευδο-στοιχείο ως εικόνα φόντου, και μέγεθος για να καλύψει ολόκληρο το ψευδο-στοιχείο με το πλάτος και ύψος ιδιότητες. Εμείς τοποθετήστε το σωστά κάτω από το .foo στοιχείο χρησιμοποιώντας το z-δείκτης: -1 κανόνας. .foo :: πριν από πλάτος: 100%; ύψος: 100%. ιστορικό: url (camel.png) κέντρο / εξώφυλλο; z-δείκτης: -1.
κέντρο λέξη-κλειδί κεντράρει την εικόνα, ενώ το κάλυμμα η λέξη-κλειδί κλιμακώνει την εικόνα σε καλύπτουν ολόκληρο το στοιχείο διατηρώντας παράλληλα τον λόγο διαστάσεων του. z-δείκτης απομακρύνεται από .foo :: πριν ώστε να μπορεί να φανεί):
3. Προσθέστε το παρασκήνιο
.foo :: μετά.--σι, για το συνοριακό πλάτος. Δίνουμε τρία διαφανή σύνορα στο ::μετά ψευδο-στοιχείο: πάνω, δεξιά και κάτω. .foo :: μετά από --b: 20px; πλάτος: calc (100% - var (- b)). ύψος: calc (100% - calc (var (- b) * 2)); σύνορα: var (- b) στερεό διαφανές, αριστερά: καμία · box-shadow: ένθετο 0 var (- dim) 0 var (- bgc); φίλτρο: φωτεινότητα (.8); z-δείκτης: -2.
calc (100% - var - b)) που επιστρέφει το συνολικό πλάτος .foo μείον το συνολικό πλάτος των οριζόντιων ορίων (μόνο τα δεξιά σύνορα, αφού δεν υπάρχει αριστερό όριο).calc (100% - calc (var (- b) * 2)) που επιστρέφει το συνολικό ύψος του .foo μείον το συνολικό πλάτος των κάθετων περιθωρίων (άνω και κάτω όρια).κουτί-σκιά ιδιοκτησία, εμείς επίσης προσθέστε μια οριζόντια σκιά του ίδιου μεγέθους με το .foo (το οποίο είναι var (- dim)).φωτεινότητα (.8) σκουραίνει το χρώμα φόντου λίγο, και τέλος, το z-δείκτης: -2 κανόνας τοποθετεί το ::μετά ψευδο-στοιχείο κάτω ::πριν που περιέχει την εικόνα.z-δείκτης αφαιρούνται και από τα δύο ψευδο-στοιχεία έτσι ώστε να μπορούν να φανούν):
4. Προσθέστε τον μετασχηματισμό
μεταμορφώνω ιδιοκτησία στα δύο ψευδο-στοιχεία, οπότε όταν ο χρήστης αιωρείται .foo, Και τα δύο ψευδο-στοιχεία είναι μετακινήθηκε οριζόντια.μετάβαση ιδιοκτησίας σε όλα τα στοιχεία στο τέλος του Βήματος 1, η κίνηση της εικόνας και του φόντου της είναι και τα δύο κινούμενα. .foo: hover :: πριν, .foo: hover :: μετά από transform: translateX (100%);
Μπόνους: Προαιρετικό περιθώριο
.foo δίπλα σε άλλα στοιχεία σε μια σελίδα και θέλετε αυτά τα άλλα στοιχεία να Κάνε στην άκρη όταν η εικόνα και το φόντο της γλιστρήσουν έξω, τότε προσθέστε ένα δεξί περιθώριο με το ίδιο πλάτος με αυτό του .foo στο .foo: hover στοιχείο. .foo: hover margin-right: var (- dim);
