.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; ) )Дивіться Pen jrWwWM від Geoff Graham (@geoffgraham) на CodePen.
Примітки:
- Демо-версія покладається на flexbox, що може вплинути на макет при тестуванні
- Припускає використання автопрефіксатора
- Ширина текстового контейнера буде визначатися довжиною використовуваного тексту
- Додавання більше кроків до
typingанімації збільшить плавність набору тексту - Відрегулюйте
letter-spacingзалежно від використовуваного сімейства шрифтів та розміру шрифту
Більше!
Деякі користуються JavaScript, який іноді є кращим (буквальне додавання символів за раз більше схоже на справжню друкарську машинку), а іноді - не (потенційні проблеми з доступністю).
Дивіться анімацію ручки друкарської машинки в чистому CSS від Тьяго Телеса Перейри (@thiagoteles) на CodePen.
Дивіться машинку Pen JS від Саймона Шахрівері (@ hi-im-si) на CodePen.
Дивіться друкарську машинку Pen від gavra (@gavra) на CodePen.
Дивіться на машинці Pen CSS від Danielgroen (@danielgroen) на CodePen.
Дивіться Pen Tippy-tappy-typer від Stove (@stevn) на CodePen.
Дивіться CSS Pen, що вводить кілька рядків з миготливим каретом Joeri Boudewijns (@Bojoer) на CodePen.