Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS Animation
Webdesign

15 Εντυπωσιακά Παραδείγματα CSS Animation στο CodePen

by
Length:LongLanguages:

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

To CodePen τείνει να γίνει το πρώτο μέρος για να παρουσιάσουμε τί μπορούμε να κάνουμε με τις web δημιουργίες μας. Ορίστε μια λίστα με κάποια από τα εξαιρετικά πράγματα που έχουν δημιουργηθεί πρόσφατα με CSS animations.

1. Ρολόι Μίκυ με Javascript

Ρολόι Μίκυ που μοιάζει με ρολόι Apple από τον Jay Salvat (@jaysalvat).

Αυτό είναι ένα όμορφο παράδειγμα που συνδυάζει CSS transitions, γραφικά SVG και Javascript για να τοποθετήσει τους δείκτες σε ένα χαριτωμένο καντράν ρολογιού Μίκυ Μάους.

2. CSS Υποβρύχιο

Υποβρύχιο με CSS από τον Alberto Jerez (@ajerez).

Η πανέμορφη χρήση του κυκλικού περιγράμματος που είναι σχεδιασμένο σαν φινιστρίνι κάνει αυτό το CSS-animated υποβρύχιο πολύ χαριτωμένο.

3. ASCII AT-AT

ΑΤ-ΑΤ από τον Tim Pietrusky (@TimPietrusky).

AT-AT μεταφορέας προσωπικού εμπνευσμένος από το Star Wars, σχεδιασμένος χρησιμοποιώντας κείμενο που αλλάζει χρώματα κυκλικά με CSS. Ένα παιχνιδιάρικο εφέ.

4. SVG/CSS Φορτωτής (Loader)

Φορτωτής SVG/CSS από τον Bidji (@Bidji).

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

5. 3D CSS Tardis

3D CSS Tardis από τον Gerwin van Royen (@Gerwinnz).

Το CSS μπορεί να χρησιμοποιηθεί για να δημιουργήσουμε φοβερά 3D εφέ. Ορίστε ένα 3D tardis:

6. Νυσταγμένο Πουλί

Νυσταγμένο Πουλί από τον Peter Klein (@pmk).

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

7. Animation Πλαισίου με Καθαρό CSS

Animation πλαισίου με καθαρό CSS χωρίς SVG από τον Rplus (@rplus).

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

8. Star Wars: Η Δύναμη Ξυπνάει

Star Wars: Η Δύναμη Ξυπνάει με CSS από τον Donovan Hutchinson (@donovanh).

Ο τίτλος από την επερχόμενη ταινία Star Wars δημιουργημένος χρησιμοποιώντας CSS, HTML και λίγη JavaScript.

9. 3D Συνθεσάιζερ

3D Συνθεσάιζερ με καθαρό CSS (πατήστε για περιστροφή) από τον Nikolay Talanov (@suez).

Δοκιμάστε τα πλήκτρα και να περιστρέψετε αυτό το 3D συνθεσάιζερ που είναι δημιουργημένο χρησιμοποιώντας CSS. Απίστευτη δουλειά:

10. Επικαλυπτόμενο Ηλιακό Σύστημα

Επικαλυπτόμενο Ηλιακό Σύστημα! από τον Tady Walsh (@tadywankenobi).

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

11. 3D Ηλιακό Σύστημα

3D Ηλιακό Σύστημα μόνο με CSS από τον Wayne Dunkley (@waynedunkley).

Άλλο ένα ηλιακό σύστημα, αλλά αυτή τη φορά σε 3D. Όμορφη χρήση σκίασης.

12. Κάμερα με επίπεδο σχεδιασμό

Κάμερα με επίπεδο σχεδιασμό με CSS animation από τον Damien Pereira Morberto (@damienpm).

Πιέστε το κλείστρο σε αυτή την επίπεδη κάμερα για να τη δείτε να δημιουργεί μια φωτογραφία χρησιμοποιώντας CSS animation.

13. Mετάβαση από Μέρα σε Νύχτα

Προσομοίωση Μέρα Νύχτα από τον Szymon Stypa (@Catagen).

Πατήστε το κουμπί για να δείτε τη μέρα να μεταμορφώνεται σε νύχτα.

14. Κινούμενο Sprite με CSS

Κινούμενο sprite με CSS από τον Avaz Bokiev (@samarkandiy).

Μια επίδειξη του πώς μια αλληλουχία από εικόνες (sprite) μπορεί να χρησιμοποιηθεί για να δημιουργήσουμε ένα stop-motion animation, πλήρες με εμπρός και αντίστροφη κίνηση.

15. Δωδεκάεδρο

Δωδεκάεδρο από τον wontem (@wontem).

Ένα διακριτικό, όμορφο δωδεακάεδρο δημιουργημένο και animated εξ'ολοκλήρου με CSS.

Συμπέρασμα

Μέχρι και πρόσφατα, θα βασιζόμασταν σε εργαλεία Flash ή Javascript για κάθε animation μέσα σε φυλλομετρητή. Οι μοντέρνοι φυλλομετρητές έχουν φέρει καλύτερη υποστήριξη για CSS, με 3D επιτάχυνση υλικού και animation.

Χάρη σε σελίδες όπως το CodePen, μπορούμε να μοιραζόμαστε και να μαθαίνουμε πιο εύκολα από ποτέ. Ποια είναι μερικά από τα πιο εντυπωσιακά animation demos που έχετε δει πρόσφατα;

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.