30 Cool CSS Animations που έχετε να δείτε

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

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

CSS Φόρτωση Animation Με patrikhjelm

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

Κινούμενο εικονίδιο καλαθιού αγορών από jonitrythall

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

Hamburger CSS3 μόνο κινούμενα σχέδια από τον Dawid Krajewski

Χτισμένο με καθαρό CSS, δεν JS ή τίποτα άλλο.

404 κινουμένων χαρακτήρων με ένα Es

Τουλάχιστον με αυτή τη σελίδα σφάλματος, ένας προγραμματιστής εργάζεται σε αυτό. Ακόμα κι αν είναι 404.

CSS Mars προσγείωση από mgitch

Έχουμε προσγειωθεί στον Άρη! Δημιουργήθηκε με CSS.

Ο εκδικητής Με τον μαριουμασέλι

Μπορείτε να ακούσετε το θυμό του Hulk να κουνηθεί από την οθόνη; Ωραία, σωστά?

Εναλλαγή ημέρας / νύχτας Με jsndks

Τώρα μπορείτε να αλλάζετε την ημέρα και τη νύχτα με το CSS. Η ιδέα Genius!

Εφαρμογή τρίτου μέρους Google Now με κωδικοποιητή

Εφαρμογές τρίτου μέρους Google Now, κινούμενες.

Clo clo Από judag

Μήπως ένας κόκορας κινείται έτσι; Το στοιχηματίζετε, γεμάτο με το λαιμό. Μεγάλη πρακτική CSS3.

Εικονίδιο μενού εικονίδιο animation από mariusbalaj

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

Άλλο προφορτωτή CSS από την Maseone

Μια φοβερή κινούμενη κίνηση ρυθμού φορτωτικής CSS. Υπνωτικό, έτσι δεν είναι?

Υποβολή του κουμπιού από τον πρωταγωνιστή

Κάντε κλικ για να υποβάλετε και το κουμπί κινεί τη διαδικασία φόρτωσης μέχρι να ολοκληρωθεί η υποβολή!

Ελαστική σχεδίαση υφάσματος πλευρικής ράβδου SVG από suez

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

Κουμπί σωματιδίων Με igcorreia

Κάνετε ό, τι λέει το κουμπί: αιωρείται για awesomeness.

Κουμπί Gooey Από τον Lucas Bebber

Κάντε κλικ για το εφέ Gooey. Θα το πάρετε μόλις το δείτε, και θα κάνετε κλικ σε αυτό μερικές φορές περισσότερο. Αμιρίτης?

Πλήκτρο περιστροφής από hakimel

Κάντε κλικ σε οποιαδήποτε πλευρά του κουμπιού Διαγραφή και το κουμπί θα αναστραφεί ανάλογα με το πού κάνετε κλικ.

Αληθινό μενού για χάμπουργκερ! Με τον CharlesSmart

Ένα πραγματικά υπέροχο μενού χάμπουργκερ. Κάντε κλικ στο χάμπουργκερ για εφέ

Κρουαζιέρα από το yy

Δείτε τη μοτοσικλέτα.

3D cube wave Από το waddington

Άγρια τρισδιάστατα κύπελλα!

Υπογραφή κινούμενων σχεδίων Με drygiel

Εδώ είναι μια υπογραφή που δεν είναι πραγματικά animation GIF, αλλά μια ακολουθία PNG κινούμενη με CSS3.

Χρωματική κλίση φόντου Από το quasimondo

Αυτό το τέχνασμα αλλάζει την κλίση του φόντου από το ένα χρώμα στο άλλο σε μια ομαλή, συνεχή φόρμα.

Εικονίδιο εναλλαγής αστρικών πολέμων Με rss

Ένα μενού χάμπουργκερ μετατρέπεται σε lightsabers στη μάχη (ένας σταυρός).

GIF Στυλ animation Από jascha

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

Εστίαση σε animation εισόδου / εξόδου Με fluxus

Ένα μικρό κινούμενο γραφικό στυλό γράφει στην κορυφή του δεσμού που συμπληρώνετε.

Χρωματικό τρίγωνοΜε φελιπέντεφάρια

Μια φοβερή οπτική ψευδαίσθηση, ναι, γίνεται με το CSS3.

Καφετιέρα Με αυτό το γραφείο

Εδώ είναι μια υπενθύμιση για να πάρετε την καθημερινή σας δόση καφέ. Όπως χρειάζεστε.

Chrome Dinosaur Από nickspiel

Δεν μπορώ να φτάσω στη σελίδα που θέλετε από μια αποτυχημένη σύνδεση; Εδώ είναι ο δεινόσαυρος που βλέπετε πάντα όταν συμβαίνει αυτό, μόνο αυτή τη φορά τρέχει από έναν μετεωρίτη!

CSS κούνημα Με elrumordelaluz

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

Ο γερανός του Νεύτωνα με όλα τα πράγματα Σμιτί

Εάν γνωρίζετε τη φυσική, γνωρίζετε σίγουρα το λίκνο του Νεύτωνα, αλλά μάλλον δεν είναι έτσι.

Ξεκινήστε το Modal By koolhaus

Κάντε κλικ για να δείτε το ωραίο και ομαλό κινούμενο παράθυρο τροχιάς.

Περπάτημα ρομπότ από P233

Αυτό το ρομπότ περπατάει μόνο, περπατώντας και περπατώντας, γύρω από τον άξονα Υ.

Ευθυγράμμιση βέλη σελίδωσης από τον Hakim

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

Τώρα Διαβάστε: 15 Όμορφα εφέ κειμένου που δημιουργήθηκαν με CSS