.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; ) )Pogledajte Pen jrWwWM Geffa Grahama (@geoffgraham) na CodePenu.
Bilješke:
- Demo se oslanja na flexbox, pa bi to moglo utjecati na izgled u testiranju
- Pretpostavlja upotrebu Autoprefixer-a
- Širina spremnika teksta odredit će se duljinom teksta koji se koristi
- Dodavanje dodatnih koraka
typinganimaciji povećat će uglađenost tipkanja - Prilagodite na
letter-spacingtemelju obitelji fontova i veličine fonta koji se koriste
Više!
Neki koriste JavaScript, što je ponekad poželjno (doslovno dodavanje znaka više se čini kao prava pisaća mašina), a ponekad i ne (potencijalna zabrinutost zbog pristupačnosti).
Pogledajte animaciju Pen Typewriter čisti CSS od Thiaga Telesa Pereire (@thiagoteles) na CodePenu.
Pogledajte Pen JS Typewriter od Simona Shahriverija (@ hi-im-si) na CodePenu.
Pogledajte mašinu Pen olovke gavra (@gavra) na CodePenu.
Pogledajte pisaću mašinu Pen CSS tvrtke Danielgroen (@danielgroen) na CodePenu.
Pogledajte olovku Tippy-tappy-typer tvrtke Stove (@stevn) na CodePenu.
Pogledajte olovku CSS tipkajući više linija s trepćućim karetom Joerija Boudewijnsa (@Bojoer) na CodePenu.