.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; ) )Oglejte si Pen jrWwWM avtorja Geoff Graham (@geoffgraham) na CodePen.
Opombe:
- Demo se opira na flexbox, kar lahko vpliva na postavitev pri testiranju
- Predpostavlja uporabo samodejnega predpona
- Širina vsebnika z besedilom bo določena z dolžino besedila, ki ga uporabljamo
- Če dodate več korakov
typinganimaciji, boste povečali gladko tipkanje - Prilagodite
letter-spacingglede na družino pisav in velikost pisave, ki se uporabljata
Več!
Nekateri uporabljajo JavaScript, ki je včasih zaželen (dobesedno dodajanje znaka je bolj kot pravi pisalni stroj), včasih pa tudi ne (morebitni pomisleki glede dostopnosti).
Oglejte si animacijo Pen Typewriter pure CSS avtorja Thiago Teles Pereira (@thiagoteles) na CodePen.
Oglejte si pisalni stroj Pen JS avtorja Simon Shahriveri (@ hi-im-si) na CodePen.
Oglejte si pisalni stroj Pen by gavra (@gavra) na CodePen.
Oglejte si pisalni stroj Pen CSS avtorja Danielgroen (@danielgroen) na CodePen.
Oglejte si Pen Tippy-tappy-typer by Stove (@stevn) na CodePen.
Oglejte si Pen CSS Typing Multiple Lines with Blinking Caret avtorja Joeri Boudewijns (@Bojoer) na CodePen.