Δημιουργήστε Cool CSS Animations Εύκολα με Animista

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

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

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

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

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

1. Επιλέξτε ένα στυλ κίνησης (swing, slide, flip-scale) από τους κύκλους στην κορυφή
2. Προσαρμόστε το με διαφορετικούς τύπους κίνησης κάτω από
3. Επεξεργαστείτε τις επιλογές κινούμενης εικόνας στην επιδεκτική γραμμή αριστεράς πλευράς

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

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

ο είναι προεπιλογή “βασικός” που μπορεί να λειτουργήσει σχεδόν σε οτιδήποτε (hover, κλικ ή άμεση κινούμενη εικόνα). Άλλοι στόχοι περιλαμβάνουν κείμενο σελίδας, κινούμενα σχέδια φόντου και ακόμη κινούμενα γραφικά εισόδου για να προβάλλετε ένα κρυφό στοιχείο σελίδας.

Μου αρέσει ιδιαίτερα το “προσοχή” σύνδεσμος στην κορυφή που έχει κάποια δροσερά εφέ κούνημα και jitter για τα στυλ κουμπιών. Αυτά λειτουργούν εξαιρετικά στα κουμπιά CTA για να προσελκύσουν την προσοχή και να ενθαρρύνουν τις αλληλεπιδράσεις των χρηστών.

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

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

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

Για να το δοκιμάσετε, απλώς επισκεφθείτε την αρχική σελίδα και κάντε κλικ “Δοκίμασέ με”. Μπορείτε επίσης να μοιραστείτε τις σκέψεις και τα συγχαρητήριά σας με τον δημιουργό της εφαρμογής web @ ana108.