.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; ) )Katso Geoff Grahamin (@geoffgraham) kynä jrWwWM CodePenistä.
Huomautuksia:
- Demo luottaa flexboxiin, joten se voi vaikuttaa asetteluun testauksessa
- Oletetaan käyttävän Autoprefixeria
- Tekstisäiliön leveys määräytyy käytetyn tekstin pituuden mukaan
- Lisää vaiheita
typinganimaatioon lisää kirjoittamisen sujuvuutta - Säädä käytettävän
letter-spacingfonttiperheen ja kirjasinkoon perusteella
Lisää!
Jotkut käyttävät JavaScriptiä, joka voi joskus olla parempi (kirjaimellisesti merkin lisääminen kerrallaan tuntuu enemmän kuin todellinen kirjoituskone) ja joskus ei (mahdolliset esteettömyysongelmat).
Katso Thiago Teles Pereiran (@thiagoteles) kynä-kirjoituskoneen animaatio puhdas CSS CodePenistä.
Katso Simon Shahriverin (@ hi-im-si) Pen JS -kirjoituskone CodePenistä.
Katso kynän kirjoituskone, jonka on kirjoittanut gavra (@gavra) CodePenistä.
Katso Danielgroenin (@danielgroen) Pen CSS -kirjoituskone CodePenistä.
Katso Stoven (@stevn) Pen Tippy-tappy-typer -koodinlukija CodePenistä.
Katso Joeri Boudewijnsin (@Bojoer) CodePen-sovelluksen Pen CSS -tyyppinen useita rivejä vilkkuvalla caretilla.