.typewriter h1 ( overflow: hidden; /* Ensures the content is not revealed until the animation */ border-right: .15em solid orange; /* The typwriter cursor */ white-space: nowrap; /* Keeps the content on a single line */ margin: 0 auto; /* Gives that scrolling effect as the typing happens */ letter-spacing: .15em; /* Adjust as needed */ animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; ) /* The typing effect */ @keyframes typing ( from ( width: 0 ) to ( width: 100% ) ) /* The typewriter cursor effect */ @keyframes blink-caret ( from, to ( border-color: transparent ) 50% ( border-color: orange; ) )Δείτε το στυλό jrWwWM του Geoff Graham (@geoffgraham) στο CodePen.
Σημειώσεις:
- Η επίδειξη βασίζεται στο flexbox, ώστε να επηρεάσει τη διάταξη των δοκιμών
- Υποθέτει τη χρήση του Autoprefixer
- Το πλάτος του κοντέινερ κειμένου θα καθοριστεί από το μήκος του κειμένου που χρησιμοποιείται
- Η προσθήκη περισσότερων βημάτων στην
typingκίνηση θα αυξήσει την ομαλότητα της πληκτρολόγησης - Προσαρμόστε
letter-spacingμε βάση την οικογένεια γραμματοσειρών και το μέγεθος της γραμματοσειράς που χρησιμοποιείτε
Περισσότερο!
Ορισμένοι χρησιμοποιούν JavaScript, το οποίο μερικές φορές μπορεί να είναι προτιμότερο (κυριολεκτικά η προσθήκη ενός χαρακτήρα κάθε φορά μοιάζει περισσότερο με μια πραγματική γραφομηχανή) και μερικές φορές όχι (πιθανές ανησυχίες προσβασιμότητας).
Δείτε το animation γραφομηχανή Pen CSS του Thiago Teles Pereira (@thiagoteles) στο CodePen.
Δείτε τη γραφομηχανή Pen JS του Simon Shahriveri (@ hi-im-si) στο CodePen.
Δείτε τη γραφομηχανή Pen από το gavra (@gavra) στο CodePen.
Δείτε τη γραφομηχανή Pen CSS του Danielgroen (@danielgroen) στο CodePen.
Δείτε το Pen Tippy-tappy-typer του Stove (@stevn) στο CodePen.
Δείτε το Pen CSS Typing Multiple Lines with Blinking Caret από τον Joeri Boudewijns (@Bojoer) στο CodePen.