.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 pennen jrWwWM av Geoff Graham (@geoffgraham) på CodePen.
Merknader:
- Demo er avhengig av flexbox, slik at det kan påvirke oppsettet under testing
- Forutsetter bruk av Autoprefixer
- Bredden på tekstbeholderen bestemmes av lengden på teksten som brukes
- Å legge til flere trinn i
typinganimasjonen vil øke jevnheten i skrivingen - Juster
letter-spacingbasert på skriftfamilien og skriftstørrelsen som brukes
Mer!
Noen bruker JavaScript, noe som noen ganger kan være å foretrekke (bokstavelig talt å legge til et tegn om gangen føles mer som en ekte skrivemaskin) og noen ganger ikke være det (potensielle bekymringsproblemer).
Se Pen Typewriter animasjon ren CSS av Thiago Teles Pereira (@thiagoteles) på CodePen.
Se Pen JS Typewriter av Simon Shahriveri (@ hi-im-si) på CodePen.
Se penn-skrivemaskinen av gavra (@gavra) på CodePen.
Se Pen CSS skrivemaskin av Danielgroen (@danielgroen) på CodePen.
Se Pen Tippy-tappy-typer av Stove (@stevn) på CodePen.
Se pennen CSS Typing Multiple Lines with Blinking Caret av Joeri Boudewijns (@Bojoer) på CodePen.