.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; ) )Podívejte se na Pen jrWwWM od Geoffa Grahama (@geoffgraham) na CodePen.
Poznámky:
- Ukázka se spoléhá na flexbox, což by mohlo ovlivnit rozložení při testování
- Předpokládá použití autoprefixeru
- Šířka textového kontejneru bude určena délkou použitého textu
- Přidáním dalších kroků do
typinganimace se zvýší plynulost psaní - Upravte
letter-spacingpodle použité rodiny fontů a velikosti písma
Více!
Někteří používají JavaScript, který může být někdy výhodnější (doslova přidání znaku najednou vypadá spíše jako skutečný psací stroj) a někdy ne (potenciální problémy s přístupností).
Podívejte se na animaci CSS animace psacího stroje od Thiaga Telesa Pereiry (@thiagoteles) na CodePen.
Podívejte se na psací stroj Pen JS Simon Shahriveri (@ hi-im-si) na CodePen.
Podívejte se na psací stroj Pen od gavra (@gavra) na CodePen.
Podívejte se na psací stroj Pen CSS od Danielgroena (@danielgroen) na CodePen.
Podívejte se na Pen Tippy-tappy-typer od Stove (@stevn) na CodePen.
Podívejte se na Pen CSS Typing Multiple Lines with Blinking Caret od Joeri Boudewijns (@Bojoer) na CodePen.