Печатающий текст на сайте, это отличное привлечение внимание, ведь думаю интересно посмотреть полностью отпечатанный текст, который безусловно должен интересен пользователю. И вашему вниманию вариант печатного текста, который полностью создан на чистом CSS. Где вы можете поставить под заголовок или под другие функций, ведь все смотрится оригинально.
Также вы самостоятельно выставляете шрифт или ставите ту скорость открытие знаков, а в нашем случай, чтоб как можно быстрей отпечатывало или наоборот медленней, вся это настройка происходит в CSS.
Установка:
HTML
Код
<h1>Здесь идет текст, который будет в печати появляться</h1>
CSS
Код
@-webkit-keyframes typing {
from { width: 0 }
to { width:17em }
}
@-moz-keyframes typing {
from { width: 0 }
to { width:17em }
}
@-webkit-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
@-moz-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
body { font-family: Consolas, monospace; }
h1 {
font-size:21px;
width:28.9em;
white-space:nowrap;
overflow:hidden;
border-right: .1em solid black;
-webkit-animation: typing 20s steps(30, end),
blink-caret 1s step-end infinite;
-moz-animation: typing 20s steps(30, end),
blink-caret 1s step-end infinite;
}
Под каждое название ставим длину заголовка, это для того, чтоб все знаки появились.
Демонстрация
