38 Εμπνευσμένες επίδειξη κινήσεων CSS3

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

Είναι αλήθεια ότι? Κρίστε το με τα μάτια σας. Σε αυτή την βιτρίνα δεν θα δείξουμε τίποτα παρά μόνο 38 που εμπνέουν demos animation με βάση το CSS3 που ανακαλύπτουν καθαρά το πραγματικό δυναμικό του CSS3. Εκτός από τα καθαρά πειράματα, θα δείτε επίσης μερικά πρακτικά παραδείγματα για τον τρόπο με τον οποίο το CSS3 μπορεί να εφαρμοστεί στον σχεδιασμό ιστοσελίδων για να γίνει πιο γλυκό και πιο σέξι.

Αρκετά είπε, ας εξερευνήσουμε τον φανταστικό κόσμο του CSS3!

Μπορεί επίσης να σας ενδιαφέρει:

• Οδηγός αρχαρίων για το CSS3
• Δημιουργία πλαισίου αναζήτησης Rocking CSS3
• Δημιουργία ιστοσελίδων HTML5 / CSS3
• Χαριτωμένο μενού πλοήγησης Breadcrumb στο CSS3
• Δημιουργήστε μια φόρμα επικοινωνίας HTML5 / CSS3 βασισμένη σε Ajax
• 35 Γραφικά που χτίζονται καθαρά με το CSS3
• περισσότερο…

Σας συνιστούμε να δείτε αυτές τις παρουσιάσεις χρησιμοποιώντας την τελευταία έκδοση της έκδοσης Safari ή Developer του Google Chrome. Ωστόσο, τα περισσότερα demos υποστηρίζουν την τελευταία έκδοση του Firefox και του Google Chrome.

Κινούμενο 3D Helix

Ο πρώτος στον κατάλογο είναι ένα απίστευτο animation από το Marcofolio.net, χρησιμοποιώντας μετασχηματισμούς 3D CSS3. Η κινούμενη εικόνα μοιάζει με τη μαγεία, αλλά μπορείτε πραγματικά να μάθετε να δημιουργείτε το παρόμοιο αποτέλεσμα με το σεμινάριο στο άρθρο!

Κινούμενα κουμπιά

Ένα must-see για το web designer, καθώς το demo δεν δείχνει μόνο τις δυνατότητες του animation CSS3, αλλά προσφέρει επίσης πολύ δροσερά και πρακτικά εφέ κουμπιού για έμπνευση!

Μενού κινουμένων σχεδίων

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

AT-AT Walker

Ένα εμπνευσμένο demo που δείχνει το δυναμικό του CSS3 για την κίνηση μιας μονάδας με μέρη του σώματος.

Battlefield CSS3

Battlefield CSS3 με πολλές εκρήξεις και πυροβολισμούς!

Μεγάλο ζήτημα

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

Μπορεί να Haz Ur Cursor?

“Γεια σου, είμαι ο Δρομέας. Ο παπάς μου έχει ένα μήνυμα για σας: "Παρακαλώ, μην χρησιμοποιείτε δρομέας: κανένα, εκτός αν δημιουργείτε έναν δρομέα που τρώει τέρας ".”

Cock Dock

Ένα σέξι πείραμα που μιμείται την αποβάθρα του Mac OS X και είναι πραγματικά ομαλή.

CSS3 Man

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

Dribbble Ball Bouncing

Με τη μικρή χρήση γραφικών τεχνικών έρχεται ένα ωραίο και διασκεδαστικό animation CSS3.

Ντούλα

Ο Dulla δείχνει μια από τις πιο κοινές τεχνικές που χρησιμοποιούνται για τη δημιουργία 2D παιχνιδιού με πλατφόρμες, η οποία τώρα είναι επίσης δυνατή με το CSS3.

Πλαίσιο ανά κινούμενο πλαίσιο

Πλαίσιο κινούμενης εικόνας με CSS3; Κανένα πρόβλημα!

Γραφική παράσταση

Μια απλή αλλά ισχυρή κινούμενη εικόνα για να παρουσιάσετε / εξηγήσετε το γράφημα στον ιστότοπό σας, να μάθετε να το κάνετε!

Υψηλός

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

Εφέ δράσης του δείκτη

Το μέλλον της επίδρασης του hover έρχεται με το CSS3. Κομψή και ελπιδοφόρα.

Είμαι ο Joseph Barrett

Το CSS3 ενσωματώθηκε στα εικονίδια κοινωνικών μέσων του site του χαρτοφυλακίου. Δεν είναι μόνο διασκεδαστικό, αλλά και δείχνει τη δημιουργικότητα του σχεδιαστή.

Άπειρο ζουμ

Ομαλή κινούμενη εικόνα, επίσης ένας καλός τρόπος για να αναδείξετε το χαρτοφυλάκιό σας. Το συνολικό ζουμ για τις 26 εικόνες είναι 67108864: 1.

Kinect και CSS3

“14 αρθρώσεις σώματος παρακολουθούνται και μετατρέπονται σε ένα σύντομο CSS animation χρησιμοποιώντας το Xbox Kinect. Τα στοιχεία του σώματος μεταφέρονται στο πρόγραμμα περιήγησης όπου αναλύονται και μετατρέπονται σε animations CSS με το animatable.com.”

Μήτρα

Θέλεις να είσαι τόσο cool όσο το Matrix; Με το CSS3 είστε σε θέση να το κάνετε.

Morphing Cubes

Πειραματική επίδειξη εξερεύνησης του CSS3 χρησιμοποιώντας 3D μετασχηματισμούς, κινούμενα σχέδια και μεταβάσεις. Το ενδιαφέρον κομμάτι εδώ είναι ότι μπορείτε ακόμα να επιλέξετε το κείμενο στα στοιχεία, ακόμα και όταν αυτά εξακολουθούν να περιστρέφονται.

Το ηλιακό μας σύστημα

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

Duff Roll

“Μμμμμμ ... Ο Χόμπερ θα αγαπούσε την ατελείωτη παροχή μπύρας.”

Poster Circle

Ένα απλό αλλά ενδιαφέρον παράδειγμα για να σας δείξει πώς να χρησιμοποιήσετε το CSS μετασχηματισμό και animation για να επιτύχετε ένα ενδιαφέρον αποτέλεσμα.

Αιώνιος Κίνδυνος

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

Rofox

Απλό και διασκεδαστικό animation, πάρτε τον πηγαίο κώδικα για να δοκιμάσετε μόνοι σας!

Shaun Τα πρόβατα

“Παρακολουθήστε τις σκηνές του Shaun και των φίλων του σε κλιπ από το 'An Ill Wind', 'Snowed In', 'The Big Chase' και 'Twos Company' μέσα από ένα διαδραστικό πείραμα που δημιουργήθηκε με βίντεο HTML5 με επιτάχυνση υλικού, 3D CSS Transforms και WebM.”

Χώρος

Ίσως ο χώρος είναι το τελικό όριο για το CSS3.

Χώρος CaCSS

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

Star Wars Crawl

Η επίδρασις του ανοίγματος Star Wars! Ακριβώς όπως το επικό όπως το CSS3.

Ο εκφραστικός ιστός

Ο εκφραστικός ιστός όχι μόνο σας παρουσιάζει το CSS3 και την υποστήριξη του προγράμματος περιήγησης, την αναφορά και την τεκμηρίωσή του, αλλά παρουσιάζει επίσης μια ζωηρή animation CSS3 στην ιστοσελίδα του.

Οι αρχηγοί επιστολών

Χρησιμοποιώντας τύπους για να δημιουργήσετε μια σκιά που μοιάζει με το πρόσωπο του ανθρώπου, ποιος θα σκεφτόταν ότι θα ήταν δυνατό με το CSS3?

Ο άνθρωπος από το Χόλιγουντ

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

Το Πλανητάριο

Απλά επικό demo για να εξερευνήσετε το πλανητάριο με λεπτομέρειες. SVG, JavaScript, HTML5, CSS3, γραμματοσειρές και τύποι.

Πληκτρολογήστε Rains

“Η πρόβλεψη για σήμερα, αν υποθέσουμε ότι χρησιμοποιείτε ένα σύγχρονο πρόγραμμα περιήγησης, είναι συννεφιασμένη, με 100% πιθανότητα να ντους της Γεωργίας.”

Τυπογραφικά εφέ

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

Περπάτημα με τον Andrew Hoyer

Το καλύτερο από όλα, μπορείτε επίσης να μάθετε να περπατάτε με τον Andrew Hoyer στο άρθρο!

Wonder Webkit

Μια θαυμάσια χρήση των μετασχηματισμών 3D CSS3 με τη βιβλιοθήκη Matrix JavaScript. Ακούγεται τεχνικό, αλλά το αποτέλεσμα είναι κουνιστό δροσερό.

Zoetrope

Τι άλλο δεν μπορείτε να κάνετε με το CSS3 όταν η Zoetrope είναι δυνατή με αυτό?

Αντανάκλαση

Εμπνευσμένος; Ναί. Πρακτικός? Ισως. Η τεχνική κινουμένων σχεδίων είναι πάντα ένα θέμα που επικαλύπτει το κεφάλι για τον προγραμματιστή και τον εμψυχωτή, καθώς απαιτεί κάποιο επίπεδο γνώσης για να παράγει πραγματικά ομαλή, μοναδική και κομψή κίνηση. Ενώ το CSS3 έχει τη δυνατότητα να κάνει κινούμενα σχέδια, αυτό δεν σημαίνει ότι είναι ένα κατάλληλο εργαλείο για κινούμενα σχέδια. Νομίζω ότι τελικά εξακολουθεί να έχει σχέση με την προτίμησή σας, καθώς και για μένα, είμαι εντάξει και με τους δύο, εφόσον το εργαλείο ταιριάζει στις ανάγκες του έργου.

Τι σκέφτεστε για αυτά τα animations CSS3; Είναι αυτά τα animations CSS3 ωραία μόνο ως πειράματα, ή μπορούν επίσης να εφαρμοστούν στον πραγματικό σχεδιασμό ιστοσελίδων; Ως συνήθως, χαιρετίζουμε την πολύτιμη σκέψη σας για το θέμα και ενημερώστε μας για το αγαπημένο σας κομμάτι της CSS3 animation επίσης!

Περισσότερο

Απλά βιτρίνα, πραγματικά; Αξίχτηκες να κερδίσεις περισσότερα! Παρακάτω είναι τα μαθήματα και οι οδηγοί του CSS3 από το Hongkiat σε εσάς, έχετε έναν ωραίο χρόνο να τους εξερευνήσετε!