Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. CSS Animation
Code

Τα 20 Καλύτερα CSS Animations στο CodeCanyon

by
Length:LongLanguages:

Greek (ελληνικά) translation by Iris Diakoumi (you can also view the original English article)

Υπήρχε μια εποχή στην ιστορία του διαδικτύου που έπρεπε να χρησιμοποιήσεις Flash αν ήθελες να προσθέσεις μερικά οπτικά εφέ στην ιστοσελίδα σου πέρα από ένα κινούμενο GIF. Φτάνοντας στο σήμερα βρίσκουμε το Flash νεκρό και πράγματα όπως τα CSS3 και HTML5 να φέρνουν  φανταστικές κινούμενες εικόνες και εφέ στο διαδίκτυο.

Αν θέλετε να προσθέσετε μερικά εξαιρετικά CSS animations στην ιστοσελίδα σας ή στο επόμενο διαδικτυακό σας project, ορίστε μια λίστα από τα 20 καλύτερα CSS animations στο CodeCanyon για να ξεκινήσετε:

1. Aero - CSS3 Hover Effects

Προσθέστε μερικά εφέ σκιασμένου γυαλιού στην εικόνα σαν να αιωρείται με το Aero - CSS3 Hover Effects.

Aero - CSS3 Hover Effects

Είναι πλήρως προσαρμόσιμο και εύκολο στη χρήση, και επίσης θα το βρείτε:

  • εύκολο στην αλλαγή χρώματος και αλλαγή από κύκλο σε τετράγωνο
  • συμβατό με όλους τους browsers -- ακόμα και με τον Microsoft Edge
  • συμβατό με SASS
  • προσαρμόσιμο CSS
  • και άλλα!

Με τα 10 εφέ που περιλαμβάνονται σε αυτήν την έκδοση και ακόμα περισσότερα εφέ στο δρόμο, το Aero - CSS3 Hover Effects είναι ένα αξιόλογο σύνολο CSS animations για τα εφέ αιώρησης των εικόνων σας.

2. MegaHover Mouse Over Effects

Το MegaHover Mouse Over Effects προσφέρει μια στιβαρή επιλογή από CSS3 εφέ αιώρησης εικόνας που είναι συμβατά με το Bootstrap 3.

MegaHover Mouse Over Effects

Επίσης:

  • χρησιμοποιεί εικονίδια Font Awesome
  • είναι συμβατό με όλους τους browsers
  • πλήρως responsive
  • και άλλα

Ενσωματώστε εύκολα και τροποποιήστε το MegaHover Mouse Over Effects σε εκατοντάδες όμορφα εφέ αιώρησης.

3. Animatia - CSS Image Hover Effects

Εύκολο στη χρήση, ελάχιστος χρόνος φόρτωσης, εξαιρετικά προσαρμόσιμο; Το Animatia - CSS Image Hover Effects είναι όλα αυτά και ακόμα περισσότερα.

Animatia - CSS Image Hover Effects

Αυτό το σύνολο από CSS περιλαμβάνει:

  • πάνω από 115 ιδιαίτερα εξατομικεύσιμα εφέ αιώρησης
  • πλήρως responsive και εύκολα στη χρήση αρχεία
  • καθαρό CSS3 και εικονίδια Font Awesome
  • και άλλα

Χρησιμοποιήστε το Animatia - CSS Image Hover Effects για στυλ κουμπιών, εφέ overlay, λεζάντες και άλλα CSS animations.

4. Hover Effects Framework

To Hover Effects Framework είναι μια πολύ αποτελεσματική λύση για CSS animations.

Hover Effects Framework

Καθαρός κώδικας, πλήρως responsive, και:

  • IcoMoon Ultimate Font
  • 4 σχήματα και 5 χρώματα
  • 50+ animations
  • και άλλα

Το Hover Effects Framework έχει καθαρό κώδικα, και το καλύτερο από όλα, περιλαμβάνει πολλά παραδείγματα για να αρχίσετε με μερικά όμορφα CSS animations.

5. Collection of Preloaders

Μπορείτε να μη χρειαστείτε άλλη συλλογή από εικόνες προφόρτωσης αφού πάρετε το Collection of Preloaders.

Collection of Preloaders

Θα λάβετε:

  • καλή τεκμηρίωση χρήσης για εύκολη προσαρμογή
  • ένα ελαφρύ και ευέλικτο σύνολο από CSS3 animations
  • 27 μοναδικά preloaders

Πλήρως φιλικά προς κινητά, το Collection of Preloaders είναι μια εξαιρετική προσθήκη στην CSS3 εργαλειοθήκη του κάθε προγραμματιστή.

6. CSS3 Image Hover Effects

Αν έχετε δει ένα CSS animation για εφέ αιώρησης σε εικόνα, τα έχετε δει όλα, σωστά;

Όχι ακριβώς.

Το CSS3 Image Hover Effects περιλαμβάνει μερικά πολύ όμορφα και μοναδικά εφέ.

CSS3 Image Hover Effects

Περιλαμβάνει:

  • 22 διαφορετικά CSS3 εφέ αιώρησης εικόνας
  • πλήρως εντυπωσιακό και responsive
  • καθαρός CSS3 κώδικας
  • και άλλα

Δείτε το CSS3 Image Hover Effects που είναι συμβατό με το Bootstrap

7. Image Hover CSS Library

Το Image Hover CSS Library είναι μια κλιμακούμενη, ελαφριά βιβλιοθήκη από CSS animation για εφέ αιώρησης εικόνων που αξίζει να γνωρίσετε.

Image Hover CSS LIbrary

Αυτή είναι μια ποιοτική συλλογή από 58 κλάσεις εφέ αιώρησης, που ελαχιστοποιείται σε κάτω από 25 KB.

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

Είναι δύσκολο να ξεχωρίσετε από άλλα CSS animations για αιώρηση σε εικόνες αλλά το Image Hover CSS Library το έχει κάνει.

8. SVG Logo Scroll Animation | CSS3 and Javascript

Είναι ωραίο να ξεφεύγουμε από τη συνήθη animations CSS — εφέ αιώρησης εικόνας — και να βλέπουμε κάτι σαν το SVG Logo Scroll Animation | CSS3 and Javascript.

SVG Logo Scroll Animation CSS3 and Javascript

Σε κάτι λιγότερο από 4k, προσθέτει μερικά όμορφα SVG animations κύλισης σελίδας.

Δημιουργήστε μερικά όμορφα animations σελίδας με το SVG Logo Scroll Animation | CSS3 and Javascript.

9. Viavi CSS3 Scroll Effects

To Viavi CSS3 Scroll Effects είναι μια πολύ όμορφη λύση για CSS3 HTML animation κύλισης.

Viavi CSS3 Scroll Effects

Μερικά από τα χαρακτηριστικά περιλαμβάνουν:

  • 16 CSS 3 εφέ κύλισης
  • απλή υλοποίηση
  • πλήρως responsive
  • και άλλα

Χρησιμοποιώντας ένα σύστημα πλέγματος και ενεργοποιημένη αφή για χρήση σε κινητά, το Viavi CSS3 Scroll Effects όχι μόνο φαίνεται καλό, αλλά είναι επίσης καλά υλοποιημένο.

10. CSS3 Spinners & Loaders

Χρειάζεστε loaders χωρίς τη χρήση gifs;

Κανένα πρόβλημα. Το CSS3 Spinners & Loaders είναι αυτό που ψάχνετε.

CSS3 Spinners Loaders
  • βρείτε πάνω από 25 παραλλαγές
  • εύκολο στην παραμετροποίηση
  • εύκολο στην επέκταση

Το CSS3 Spinners & Loaders είναι καλά τεκμηριωμένο και είναι μια πλήρης λύση CSS για spinners και loaders.

11. Midix - CSS3 Animation Effects without jQuery

Χρησιμοποιώντας καθαρό CSS3, το Midix - CSS3 Animation Effects without jQuery προσφέρει ένα σύνολο από 16 CSS animations.

Midix - CSS3 Animation Effects without jQuery

Μπορείτε να προσαρμόσετε το:

  • ταχύτητα κίνησης
  • καθυστέρηση κίνησης
  • χρώματα εικονιδίων

Με το Midix - CSS3 Animation Effects without jQuery, θα λάβετε όχι μόνο μια υπέροχη συλλογή από CSS animations αλλά επίσης δωρεάν ενημερώσεις και φιλική υποστήριξη.

12. CSS3 Hover Effects

Το CSS3 Hover Effects είναι άλλη μια καλή επιλογή.

CSS3 Hover Effects

Μπορείτε εύκολα να αλλάξετε:

  • χρώμα
  • μέγεθος περιγράμματος
  • κύκλο σε τετράγωνο
  • απόσταση μεταξύ των μπλοκ κειμένου

Με 479 εικόνες retina και 20 διαφορετικά εφέ, το CSS3 Hover Effects είναι ένας εξαιρετικός πόρος για να χρησιμοποιήσετε.

13. VSPreloader - Ultimate CSS Animated Preloaders

Όσον αφορά στους κινούμενους preloaders, το VSPreloader - Ultimate CSS Animated Preloaders είναι μια από τις πιο ιδιαίτερες, δημιουργικές και όμορφες λύσεις που πρόκειται να βρείτε.

VSPreloader - Ultimate CSS Animated Preloaders

Tα χαρακτηριστικά περιλαμβάνουν:

  • 60 helpers
  • 40 presents
  • 30 animations
  • απεριόριστα χρώματα

Είναι επίσης εξαιρετικά καθαρό και μοναδικό.

Ρίξτε μια καλύτερη ματιά στο VSPreloader - Ultimate CSS Animated Preloaders. Νομίζω ότι θα σας εντυπωσιάσει.

14. Heed - Pure CSS3 Animation Effects

To Heed - Pure CSS3 Animation Effects σας προσφέρει ότι χρειάζεστε σε μια συλλογή από CSS animations.

Heed - Pure CSS3 Animation Effects

Είναι εύκολο να το εγκαταστήσετε, να το επεξεργαστείτε και να το ρυθμίσετε με SCSS (το αρχείο περιλαμβάνεται).

  • 20 επιλογές χρώματος material design
  • εικονίδια Font Awesome
  • 15 εφέ
  • και άλλα

Το Heed - Pure CSS3 Animation Effects είναι φιλικό προς retina, φιλικό προς υποστήριξη και περιλαμβάνει δωρεάν ενημερώσεις.

15. Ayan - CSS3 Link Hover Effects

Ενώ πολλά από τα CSS animations που βρίσκετε εστιάζουν σε εφέ εικόνων και σελίδων, το Ayan - CSS3 Link Hover Effects, παρέχει μια εντυπωσιακή σειρά από εφέ αιώρησης συνδέσμων.

Ayan - CSS3 Link Hover Effects

Θα βρείτε 30 όμορφα CSS3 εφέ αιώρησης συνδέσμων και:

  • σταθερή συμβατότητα με browsers
  • τεκμηρίωση βοήθειας
  • σύγχρονα animations
  • και άλλα

Το Ayan - CSS3 Link Hover Effects είναι δημιουργικό, καθαρό, και προσθέτει μια ωραία πινελιά από CSS animations χωρίς να είναι υπερβολικά φανταχτερό.

16. Sinister - Pure CSS Image Hover Effects

Περιέχοντας πάνω από 100 εφέ αιώρησης, το Sinister - Pure CSS Image Hover Effects προσφέρει ένα εντυπωσιακό αριθμό καλοσχεδιασμένων εφέ.

Sinister - Pure CSS Image Hover Effects

Περιλαμβάνει περισσότερα από:

  • 22 εφέ μετάβασης περιεχομένου
  • 18 εφέ μετάβασης overlay
  • 23 εφέ μετάβασης κουμπιού
  • 100 εφέ αιώρησης

Χωρίς τη χρήση JavaScript ή jQuery, και χρησιμοποιώντας καθαρό CSS, το Sinister - Pure CSS Image Hover Effects παρουσιάζει:

  • zoom-in και zoom-out
  • περιστροφή στον Χ και περιστροφή στον Υ
  • περιστροφή δεξιά και αριστερά
  • περιστροφή και κλιμάκωση
  • κυβική μετάβαση
  • αιώρηση επιπέδου
  • και άλλα

17. Stylish Social Media Animated Icons Style

Προσθέστε μερικά ωραία CSS animations στα εικονίδια μέσων κοινωνικής δικτύωσης εικονίδια με το Stylish Social Media Animated Icons Style.

Stylish Social Media Animated Icons Style

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

  • εύκολη υλοποίηση και προσαρμογή
  • σταθερή βάση κώδικα και τεκμηρίωση
  • καμία εξάρτηση από εικόνες ή εικονίδια
  • συμβατότητα με όλους τους browsers
  • και άλλα

Το Stylish Social Media Animated Icons Style προσθέτει μια όμορφη πινελιά από χρώμα και CSS animation στα εικονίδια των μέσων κοινωνικής δικτύωσής σας.

18. CSS3 Animations

Ζωντανέψτε εύκολα το div, p, και το body στην HTML με το CSS3 Animations.

CSS3 Animations

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

Tα χαρακτηριστικά περιλαμβάνουν:

  • εύκολο στη χρήση και παραμετροποίηση
  • μόνο CSS3, όχι JavaScript
  • 10+ animations

Θα προσθέσετε το CSS3 Animations στην σχεδιαστική εργαλειοθήκη σας;

19. Pure CSS3 Image Accordion

Κατασκευάστε το δικό σας slider ή κάτι παρόμοιo χρησιμοποιώντας το Pure CSS3 Image Accordion για μερικά όμορφα CSS animations.

Pure CSS3 Image Accordion

Είναι:

  • πλήρως responsive
  • δεν έχει σταθερό πλάτος
  • τέσσερις επιλογές από λεζάντες
  • εύκολο στην παραμετροποίηση

Δημιουργήστε οπτική μουσική με το Pure CSS3 Image Accordion.

20CSS3 Mega Tooltip Animation Pack

Βαρεθήκατε τα απλά tooltips;

Προσθέστε λίγη μαγεία από CSS animation χρησιμοποιώντας το CSS3 Mega Tooltip Animation Pack.

CSS3 Mega Tooltip Animation Pack

Αυτό το πακέτο από CSS animations για tooltips περιλαμβάνει:

  • 10 εφέ κίνησης
  • 8 προκαθορισμένα χρώματα
  • τεκμηρίωση
  • και άλλα

Το CSS3 Mega Tooltip Animation Pack περιέχει επίσης και μια εναλλακτική για τον Internet Explorer.

Συμπέρασμα

Ακόμα και με πολλά διαφορετικά CSS animations διαθέσιμα στην Envato Market, ίσως ακόμα δεν έχετε βρει ακριβώς αυτό που ψάχνετε.

Κανένα πρόβλημα. Μπορείτε να δημιουργήσετε το δικό σας!

Δείτε τα Envato eBooks όπως το Mastering CSS3, ακολουθήστε κάποιο από τα μαθήματα για συγγραφή κώδικα που προσφέρονται, ή βρείτε και ακολουθήστε το εξαιρετικό CSS3 Code Tutorial.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.