.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; ) )Pozrite si pero jrWwWM od Geoffa Grahama (@geoffgraham) na stránkach CodePen.
Poznámky:
- Demo sa spolieha na flexbox, ktorý by mohol pri testovaní ovplyvniť rozloženie
- Predpokladá použitie nástroja Autoprefixer
- Šírka textového kontajnera bude určená dĺžkou použitého textu
- Pridaním ďalších krokov k
typinganimácii sa zvýši plynulosť písania - Upravte ich
letter-spacingna základe použitej rodiny a veľkosti písma
Viac!
Niektorí používajú JavaScript, ktorý môže byť niekedy výhodnejší (doslova pridať znak naraz, skôr ako skutočný písací stroj) a niekedy nie (potenciálne obavy o prístupnosť).
Pozrite si CSS animácie čistého písacieho stroja od Thiaga Telesa Pereiru (@thiagoteles) na serveri CodePen.
Pozrite si písací stroj Pen JS Simon Shahriveri (@ hi-im-si) na serveri CodePen.
Pozri si písací stroj Pen od gavra (@gavra) na CodePen.
Prečítajte si písací stroj Pen CSS od Danielgroena (@danielgroen) na serveri CodePen.
Prečítajte si Pen Tippy-tappy-typer od spoločnosti Stove (@stevn) na serveri CodePen.
Pozrite si tému Písanie viacerých riadkov perom CSS s blikajúcim znakom od Joeri Boudewijns (@Bojoer) na stránkach CodePen.