.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; ) )Se Pen jrWwWM af Geoff Graham (@geoffgraham) på CodePen.
Bemærkninger:
- Demo er afhængig af flexbox, så det kan påvirke layoutet ved testning
- Antager brugen af Autoprefixer
- Bredden på tekstbeholderen bestemmes af længden af den anvendte tekst
- Tilføjelse af flere trin til
typinganimationen vil øge jævnheden ved skrivningen - Juster det
letter-spacingbaserede på skrifttypefamilien og skriftstørrelsen, der bruges
Mere!
Nogle bruger JavaScript, som nogle gange kan være at foretrække (bogstaveligt at føje et tegn ad gangen føles mere som en rigtig skrivemaskine) og nogle gange ikke være (potentielle problemer med tilgængelighed).
Se Pen Typewriter-animation ren CSS af Thiago Teles Pereira (@thiagoteles) på CodePen.
Se Pen JS Typewriter af Simon Shahriveri (@ hi-im-si) på CodePen.
Se Pen-skrivemaskinen af gavra (@gavra) på CodePen.
Se Pen CSS-skrivemaskine af Danielgroen (@danielgroen) på CodePen.
Se Pen Tippy-tappy-typer af Stove (@stevn) på CodePen.
Se Pen CSS Typing Multiple Lines with Blinking Caret af Joeri Boudewijns (@Bojoer) på CodePen.