.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; ) )Vezi Pen jrWwWM de Geoff Graham (@geoffgraham) pe CodePen.
Note:
- Demo-ul se bazează pe flexbox, astfel încât ar putea afecta aspectul în timpul testării
- Presupune utilizarea Autoprefixerului
- Lățimea containerului de text va fi determinată de lungimea textului utilizat
- Adăugarea mai multor pași la
typinganimație va crește fluiditatea tastării - Ajustați în
letter-spacingfuncție de familia de fonturi și dimensiunea fontului utilizat
Mai mult!
Unii folosesc JavaScript, care uneori poate fi preferabil (adăugarea literală a unui personaj la un moment dat se simte mai degrabă ca o mașină de scris reală) și uneori nu este (potențiale probleme de accesibilitate).
Vedeți animația de tipografie CS CS pur de Thiago Teles Pereira (@thiagoteles) pe CodePen.
Vezi Pen JS Typewriter de Simon Shahriveri (@ hi-im-si) pe CodePen.
Vedeți mașina de scris Pen de la gavra (@gavra) pe CodePen.
Vedeți mașina de scris Pen CSS de Danielgroen (@danielgroen) pe CodePen.
Vedeți Pen Tippy-tappy-typer de la Stove (@stevn) pe CodePen.
Vedeți Pen CSS Typing Multiple Lines with Blinking Caret de Joeri Boudewijns (@Bojoer) pe CodePen.