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

Sep 13, 2025

πως να

Όταν χρησιμοποιείται καλά, CSS animation μπορεί να προσθέσει ενδιαφέρον και προσωπικότητα στον ιστότοπό σας. Σε αυτό το άρθρο, θα περπατήσουμε μέσω του πώς να δημιουργήσουμε ένα κινούμενο αποτέλεσμα που θα κάνει την τυπογραφία σας σταδιακά, σαν να πληκτρολογήθηκε σε μια γραφομηχανή. Μπορείτε να δείτε ένα παράδειγμα της κινούμενης εικόνας σε δράση στον ιστότοπο για Κρυπτόν , ένα bot trading cryptocurent. Το αποτέλεσμα είναι εντυπωσιακό και είναι εύκολο να εφαρμοστεί.

Για άλλους εύκολους τρόπους δημιουργίας αξιοπρεπούς σχεδιασμού ιστοσελίδων, δοκιμάστε ένα εξαιρετικό οικοδόμος ιστότοπου εργαλείο, ή μια κορυφή web hosting υπηρεσία. Ή, διαβάστε παρακάτω για να μάθετε πώς να επιτύχετε αυτό το animation στον δικό σας site.

Εξερευνήστε τα νέα σύνορα της CSS Animation

01. Έναρξη εγγράφων

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

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; κεφάλι & gt;
& lt; τίτλος & gt; πληκτρολογώντας effect & lt; / τίτλος & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "styles.css" / & gt;
& lt; / head & gt;
& lt; body & gt;
*** Βήμα 2 εδώ
& lt; / Body & GT;
& lt; / html & gt;

02. Περιεχόμενο HTML

Το περιεχόμενο HTML αποτελείται από ένα δοχείο που χρησιμοποιεί την κατηγορία "Τύπος". Αυτό θα χρησιμοποιηθεί από το CSS για να εφαρμόσει το αποτέλεσμα δακτυλογράφησης σε οποιαδήποτε παιδικά στοιχεία. Το στοιχείο περιεχομένου του παιδιού είναι κατασκευασμένο από ετικέτα H1, αλλά θα μπορούσατε να χρησιμοποιήσετε ένα άλλο στοιχείο όπως το 'P' για να δημιουργήσετε το στοιχείο ως παράγραφο.

 & lt; div class = "πληκτρολόγηση" & gt;
  & LT; H1 & GT; Βάλτε τον τίτλο σας εδώ ... & LT; / H1 & GT;
& lt; / div & gt;

03. Έναρξη CSS

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

 Σώμα, HTML {
  Οθόνη: μπλοκ;
  Πλάτος: 100%.
  Ύψος: 100%.
  Ιστορικό: # 000;
  Χρώμα: #FFF;
  Padding: 0;
  Περιθώριο: 0;
}

04. Πληκτρολογώντας τα παιδιά

Όλα τα παιδιά μέσα στο δοχείο δακτυλογράφησης έχουν οριστεί για να εμφανίζονται σε μία γραμμή χωρίς τη χρήση περιτύλιξης κειμένου. Το πιο σημαντικό, αυτά τα στοιχεία των παιδιών έχουν το animation "πληκτρολόγηση" που τους εφαρμόζεται. Αυτό το κινούμενο σχέδιο έχει οριστεί για να παίξει πάνω από πέντε δευτερόλεπτα με 50 στιγμιότυπα πλαισίου - επιτρέποντας το κλιμακωτό αποτέλεσμα δακτυλογράφησης.

 .typing & gt; * {
  Overflow: Κρυμμένο?
  Λευκό χώρο: NowRap;
  Κινούμενα σχέδια: Typinganim 5s βήματα (50).
}

05. Μάτια προσώπου

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

 .typing & gt; *::μετά{
  Περιεχόμενο: ".";
  Οθόνη: μπλοκ;
  Θέση: Απόλυτη.
  Κορυφή: 1em;
  Αριστερά: .35em;
}

06. Πρόσωπο στόμα

Όπως με τα μάτια, το στόμα του προσώπου είναι κατασκευασμένο από ένα εικονικό στοιχείο CSS - αυτή τη φορά χρησιμοποιώντας το πριν εκλέκτορας. Το στόμα τοποθετείται σε σχέση με το γονικό στοιχείο κειμένου, καθώς και η ακτίνα των συνόρων να εμφανίζεται με στρογγυλεμένο σχήμα.

ο πληκτρολογήσειςPeak animation εφαρμόζεται. Θα διαρκέσει 0,5 δευτερόλεπτα χρησιμοποιώντας δύο πλαίσια κινούμενων σχεδίων. Με το κινούμενο σχέδιο επαναλαμβάνεται πέντε φορές, ο συνολικός χρόνος κινούμενης εικόνας θα είναι 2,5 δευτερόλεπτα.

 .typing & gt; *::πριν{
  Περιεχόμενο: "";
  Θέση: Απόλυτη.
  Οθόνη: μπλοκ;
  Κορυφή: 2.1em;
  Αριστερά:. 25em;
  Πλάτος: 1em;
  Ύψος: .1em;
  Ακτίνα συνοριακής ακτίνας: 100%.
  Ιστορικό: #FFF;
  Κινούμενα σχέδια: Τυπογραφίες .5s βήματα (2).
  animation-retation-count: 5;
}

07. Ορισμοί κινούμενων εικόνων

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

 @Keyframes typinganim {
  Από το πλάτος: 0}
  σε {πλάτος: 100%}
}
@keyframes typingspeak {
  0% {πλάτος: 1em; Ύψος: .1em}
  100% {πλάτος: 1em; Ύψος: .5em; }
}
***

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

Αυτό το άρθρο δημοσιεύθηκε αρχικά σε εξέταση 275 του δημιουργικού σχεδιασμού Web Magazine Web Design. Αγοράστε τεύχος 275 εδώ ή Εγγραφείτε στο Web Designer εδώ .

Σχετικά Άρθρα:

Δημιουργία κιγκλιδώματα Slick UI
Κατανόηση της ιδιοκτησίας οθόνης CSS
Δημιουργήστε ένα κινούμενο αποτέλεσμα κειμένου ατμού

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

01. Έναρξη εγγράφων

02. Περιεχόμενο HTML

03. Έναρξη CSS

04. Πληκτρολογώντας τα παιδιά

05. Μάτια προσώπου

06. Πρόσωπο στόμα

07. Ορισμοί κινούμενων εικόνων

πως να - Τα πιο δημοφιλή άρθρα

Πώς να κάνετε ένα meme στο Photoshop

Πώς να προσθέσετε κινούμενα σχέδια στο SVG με CSS

Πάρτε περισσότερα από το γραφίτη με αυτές τις συμβουλές

Έλεγχος κύριας έκδοσης για απομακρυσμένες ομάδες

Πώς να τονίσει το σημείο εστίασης μιας εικόνας

Δημιουργία εφαρμογών που λειτουργούν εκτός σύνδεσης

15 Συμβουλές πορτρέτου Fantasy

Πάρτε δημιουργικό με πορτρέτα και ευαισθητοποίηση στο πρόσωπο υγροποιημένο

Κατηγορίες