35 πραγματικά συναρπαστικά εφέ εικόνας CSS

Εφέ εικόνας CSS

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

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

Ρευστή περιστρεφόμενη εικόνα 3D

Τρισδιάστατος κύβος

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

Έκρηξη εφέ
σχετικό άρθρο:
35 ακόμη εφέ κειμένου CSS για τον ιστότοπό σας

Εφέ 3D hover

Εφέ 3D Hover

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

CSS 3D Πανόραμα

CSS 3D Πανόραμα

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

Creativos Online
σχετικό άρθρο:
27 βασικά εφέ κειμένου CSS για την τυπογραφία του ιστότοπού σας

Εικόνες με προοπτική "κλίση"

Προοπτική απεικόνιση κλίσης

Un οπτικό πείραμα που μπορεί να εξυπηρετήσει έναν συγκεκριμένο σκοπό ως τμήμα ιστού.

Ενετικά περσίδες

Ενετικά περσίδες

Ένα υπέροχο οπτικό εφέ κάθε φορά αφήστε το δείκτη του ποντικιού έτσι ώστε να αλλάζει μεταξύ των δύο αντιθέσεων που δίνει η εικόνα.

Διαχωρισμένη εικόνα

Διαχωρισμένη εικόνα

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

Τοποθετήστε το εφέ εικόνας

Hover Effect Image

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

Εφέ εμπλοκής 

Espejo

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

Εικόνα με εφέ αντανάκλασης

Ανακλαστικό αποτέλεσμα

Μια δράση που επιδιώκει προβάλλετε το εφέ αντανάκλασης στην εικόνα που έχουμε χρησιμοποιήσει για αυτό το εφέ εικόνας CSS.

Κλίση εικόνας σε εφέ αιωρήματος

Εφέ κλίσης

Φτάνω λίγο ζάλη βλέποντας πώς οι πλευρές της εικόνας παράγουν ένα πολύ εντυπωσιακό διπλό εφέ.

Αιωρήστε το εφέ θόλωσης

Εφέ θόλωσης

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

Αιωρηθείτε την εικόνα

Αιωρηθείτε την εικόνα

Υπάρχει ένα αποτέλεσμα του μετατόπιση την ίδια στιγμή που βάζουμε το δείκτη ποντίκι πάνω από την εικόνα.

Αιωρήστε το εφέ στο SVG

Hover svg

Ένα μεγάλο εφέ αιωρήματος που βάζει αποκάλυψε την κρυφή εικόνα με το ίδιο το όνομα. Εξαιρετικό φινίρισμα και τέλειο για την εμφάνιση μιας δημιουργικής και περίεργης γκαλερί εικόνων.

Από κείμενο σε εικόνα, αιωρηθείτε

Εφέ SVG

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

Αποκαλύπτοντας μέρος μιας εικόνας φόντου

Hover αποκαλύπτει

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

Αιωρηθείτε κινούμενα σχέδια

Κινούμενη εικόνα Hover

Με εξαιρετικό αποτέλεσμα, αλλά πολύ απλό στη σύνθεσή του. Εάν ψάχνετε κάτι απλοϊκό και μινιμαλιστικό, αυτό το αποτέλεσμα θα σε κάνει να ερωτευτείς.

Παρακολούθηση εφέ

Παρακολούθηση εικόνας

άλλος απλό αποτέλεσμα για συγκεκριμένο σκοπό.

Ζουμ εικόνας

Zoom

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

Εφέ ζουμ

Μετακινήστε το ζουμ

Μια άλλη εναλλακτική λύση εφέ ζουμ όταν αφήνουμε το δείκτη ποντίκι σκαρφαλωμένο στην εικόνα.

Εφέ μεγεθυντικού φακού

Εφέ μεγεθυντικού φακού

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

Δεν υπάρχει μετακίνηση του JavaScript

Όχι JS

Χωρίς JavaScript μπορείτε να δημιουργήσετε ξανά ένα εφέ ζουμ εικόνα με μεταβλητό πλέγμα.

Εφέ επικάλυψης CSS

Φτερουγίζω

Un καθαρό εφέ CSS για ένα επίπεδο που είναι τοποθετημένο στην εικόνα που έχουμε.

Hovy για εικόνες

Hovy εικόνες

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

Επικάλυψη εικόνας

γραμμές

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

Εφέ επικάλυψης εικόνας

Κυκλική αιωρείται

Επιστρέφουμε με ένα άλλο αποτέλεσμα επικάλυψη σε HTML και CSS στις οποίες οι κυκλικές γραμμές είναι οι πρωταγωνιστές.

Εφέ επικάλυψης εικόνας

Φτερουγίζω

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

Τοποθετήστε το εφέ με κινούμενη εικόνα

Τοποθετήστε το εικονίδιο

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

Αιωρηθείτε εφέ με υπότιτλους

Subtítulos

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

3D εφέ κατεύθυνσης

3D κατεύθυνση

Ένα από τα πιο ενθαρρυντικά εφέ εικόνας που θα δείτε σε ολόκληρη τη λίστα. ο ο δείκτης του ποντικιού θα γίνει ο οδηγός για τον «τρισδιάστατο κύβο».

Κλίμακα εικόνας

Κλίμακα εικόνας

Ένα άλλο απλό αποτέλεσμα, αλλά πολύ επιδεικτικό χωρίς πολλά ακμάζει.

Εφέ σκιάς iOS με το React

ios σκιές

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

Σκιά στυλ iOS 10

ios σκιά

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

Εφέ μετάβασης εικόνας

Μωσαϊκός

Un υπέροχο εφέ μετάβασης στο οποίο η εικόνα αποσυντίθεται σε πλέγμα πλεγμάτων. Μπορείτε να ελέγξετε τον χρόνο κατά τον οποίο εμφανίζεται το εφέ και άλλα.

Μεταβείτε στη μετάβαση εικόνας

Πάπυρος

Un πολύ μοντέρνο και δημιουργικό εφέ μετάβασης για τον ιστότοπό σας. Μην χάσετε το ραντεβού σε αυτό το CSS.

Κύλιση της εικόνας με τον τροχό του ποντικιού

Μετάβαση

Θα πρέπει να εφαρμόστε το τη στιγμή που χρησιμοποιείτε τον τροχό του ποντικιού για εναλλαγή από τη μία εικόνα στην άλλη με μια εξαιρετική κίνηση μετάβασης. Θεαματικός.


6 σχόλια, αφήστε τα δικά σας

Αφήστε το σχόλιό σας

Η διεύθυνση email σας δεν θα δημοσιευθεί. Τα υποχρεωτικά πεδία σημειώνονται με *

*

*

  1. Υπεύθυνος για τα δεδομένα: Miguel Ángel Gatón
  2. Σκοπός των δεδομένων: Έλεγχος SPAM, διαχείριση σχολίων.
  3. Νομιμοποίηση: Η συγκατάθεσή σας
  4. Κοινοποίηση των δεδομένων: Τα δεδομένα δεν θα κοινοποιούνται σε τρίτους, εκτός από νομική υποχρέωση.
  5. Αποθήκευση δεδομένων: Βάση δεδομένων που φιλοξενείται από τα δίκτυα Occentus (ΕΕ)
  6. Δικαιώματα: Ανά πάσα στιγμή μπορείτε να περιορίσετε, να ανακτήσετε και να διαγράψετε τις πληροφορίες σας.

  1.   Σάντι Χερνάντεζ dijo

    Γεια. Μου άρεσαν πολύ τα εφέ που δημοσιεύσατε. Τυχαία θα ξέρετε πώς γίνεται το εφέ όταν τοποθετείτε το δείκτη σε μια εικόνα και κινείται από κάτω προς τα πάνω, ιδανικό για προβολή προεπισκόπησης ιστοσελίδων. Εδώ είναι ένα παράδειγμα αυτού που εννοώ, στην ενότητα «ΤΕΛΕΥΤΑΙΑ ΕΡΓΑΣΙΑ ΙΣΤΟΣΕΛΙΔΑΣ
    »Από τον ιστότοπο selectawebs.com
    Ευχαριστώ εκ των προτέρων

  2.   Ομάρ dijo

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

  3.   Ρότζερ Γκάμπριελ dijo

    Εξαιρετικά εφέ. Είμαι αυτοδίδακτος, πάντα μου άρεσε πολύ η ιδέα της ανάπτυξης ιστού, θα ήθελα πάρα πολύ τις συμβουλές σας για το πώς να ξεκινήσετε και με ποια σειρά να μάθετε. Χαιρετισμοί

  4.   Ναταλία dijo

    Γεια σας, ευχαριστώ για το περιεχόμενό σας. Ανακαλύψτε τη σελίδα σας σήμερα. Είναι ένα θαύμα. Δεν υπάρχει τέλος στην ανάγνωση και τα ερωτήματα που μπορούν να γίνουν σε αυτήν. ;)

    1.    Μανουέλ Ραμίρες dijo

      Hola Natalia! Me alegro que disfrutes con las lecturas aquí en Creativos Online. Τα καλύτερα!

  5.   Μεντόζα dijo

    Γεια, εντυπωσιακή λίστα με καλά εφέ, θα ήταν πολύ ωραίο να δούμε πώς να τα εφαρμόσετε στο wordpress με elementor