.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; ) )Lásd Geoff Graham (@geoffgraham) toll jrWwWM-jét a CodePen-en.
Megjegyzések:
- A bemutató a flexboxra támaszkodik, így ez befolyásolhatja a teszt elrendezését
- Feltételezi az Autoprefixer használatát
- A szöveges tároló szélességét a használt szöveg hossza határozza meg
- További lépések hozzáadása az
typinganimációhoz növeli a gépelés simaságát - Állítsa
letter-spacingbe a használt betűtípus-család és betűméret alapján
Több!
Vannak, akik JavaScriptet használnak, ami néha előnyösebb lehet (ha szó szerint egyszerre adunk hozzá egy karaktert, inkább egy igazi írógépnek tűnik), és néha nem (lehetséges akadálymentességi problémák).
Lásd Thiago Teles Pereira (@thiagoteles) a Pen Typewriter tiszta CSS animációját a CodePen-en.
Lásd: Simon Shahriveri (@ hi-im-si) Pen JS írógépe a CodePen-en.
Lásd a Pen írógépét gavra (@gavra) a CodePen-en.
Lásd Danielgroen (@danielgroen) Pen CSS írógépét a CodePen-en.
Lásd: a Stove (@stevn) Pen Tippy-tappy-typer gépe a CodePen-en.
Lásd Joeri Boudewijns (@Bojoer) a CodePen oldalán a Pen CSS-t, amely több sort ír be villogó karétával.