Пишущая машинка Эффект - CSS-хитрости

Anonim 
.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 Джеффа Грэма (@geoffgraham) на CodePen.

Примечания:

  • Демо полагается на flexbox, поэтому это может повлиять на макет при тестировании.
  • Предполагает использование Autoprefixer
  • Ширина текстового контейнера будет определяться длиной используемого текста.
  • Добавление большего количества шагов к typingанимации повысит плавность набора текста.
  • Отрегулируйте в letter-spacingзависимости от используемого семейства шрифтов и размера шрифта

Более!

Некоторые используют JavaScript, который иногда может быть предпочтительнее (буквальное добавление символа за раз больше похоже на настоящую пишущую машинку), а иногда нет (потенциальные проблемы с доступностью).

Посмотрите анимацию Pen Typewriter на чистом 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.

См. Статью Joeri Boudewijns (@Bojoer) «Ввод нескольких строк в несколько строк с мигающей вставкой» на CodePen.