.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; ) )Guarda la penna jrWwWM di Geoff Graham (@geoffgraham) su CodePen.
Appunti:
- La demo si basa su flexbox, quindi potrebbe influire sul layout durante il test
- Presuppone l'uso di Autoprefixer
- La larghezza del contenitore di testo sarà determinata dalla lunghezza del testo utilizzato
- L'aggiunta di più passaggi
typingall'animazione aumenterà la fluidità della digitazione - Regola il in
letter-spacingbase alla famiglia di caratteri e alla dimensione del carattere utilizzato
Di più!
Alcuni usano JavaScript, che a volte può essere preferibile (aggiungere letteralmente un carattere alla volta sembra più una vera macchina da scrivere) e talvolta non lo è (potenziali problemi di accessibilità).
Guarda l'animazione di Pen Typewriter puro CSS di Thiago Teles Pereira (@thiagoteles) su CodePen.
Guarda la macchina da scrivere Pen JS di Simon Shahriveri (@ hi-im-si) su CodePen.
Guarda la macchina da scrivere Pen di gavra (@gavra) su CodePen.
Guarda la macchina da scrivere Pen CSS di Danielgroen (@danielgroen) su CodePen.
Guarda la Pen Tippy-tappy-typer di Stove (@stevn) su CodePen.
Guarda la penna CSS che digita più linee con accento circonflesso lampeggiante di Joeri Boudewijns (@Bojoer) su CodePen.