.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; ) )Zie de Pen jrWwWM door Geoff Graham (@geoffgraham) op CodePen.
Opmerkingen:
- Demo is afhankelijk van flexbox, dus dat kan de lay-out tijdens het testen beïnvloeden
- Veronderstelt het gebruik van Autoprefixer
- De breedte van de tekstcontainer wordt bepaald door de lengte van de gebruikte tekst
- Door meer stappen aan de
typinganimatie toe te voegen, wordt het typen soepeler - Pas de aan op
letter-spacingbasis van de gebruikte lettertypefamilie en lettergrootte
Meer!
Sommigen gebruiken JavaScript, wat soms de voorkeur heeft (het letterlijk toevoegen van een teken per keer voelt meer als een echte typemachine) en soms niet (mogelijke toegankelijkheidsproblemen).
Zie de Pen Typewriter-animatie pure CSS door Thiago Teles Pereira (@thiagoteles) op CodePen.
Zie de Pen JS Typewriter van Simon Shahriveri (@ hi-im-si) op CodePen.
Zie de pen-typemachine van gavra (@gavra) op CodePen.
Zie de Pen CSS-typemachine van Danielgroen (@danielgroen) op CodePen.
Zie de Pen Tippy-tappy-typer van Stove (@stevn) op CodePen.
Zie de Pen CSS Meerdere regels typen met knipperende caret door Joeri Boudewijns (@Bojoer) op CodePen.