Печатающийся текст — как сделать эффект на css
Эффект печатающийся текст вы вероятно не раз видели на различных ресурсах. Это когда вы открываете страницу и видите как какой-то текст сам печатается на ней. Этот эффект часто используют в качестве рекламы. И действительно, очень эффективно, посетителю становится интересно, что-же там ему напечатают)).
Ну вот например как здесь:
Cейчас я расскажу вам о чем-то….
А делается печатающийся текст очень просто на чистом css не надо прописывать ни каких JS-скриптов.
И так, на странице вставляете код html:
<p class="text-type">Cейчас я расскажу вам о чем-то....</p>
А в файле css прописываете стили для вашего класса text-type:
.text-type { width: 300px; color: red; font-size: 22px; font-family: 'Marck Script', cursive; white-space:nowrap; overflow:hidden; -webkit-animation: type 15s steps(50, end); animation: type 15s steps(50, end); } @keyframes type{ from { width: 0; } } @-webkit-keyframes type{ from { width: 0; } }
Есть некоторые нюансы. Не пишите слишком длинный текст, чтобы он не выходил за рамки дисплея. Я указал ширину 300px, это для того, чтобы ваш текст корректно отобразился на мобильной версии. Может есть вариант как-то сделать перенос строки эффекта печатающийся текст, но я пока не знаю (тоже многому только учусь), вариант <br/> не проходит, начинает печатать все перенесенные строки одновременно, хотя в некоторых ситуациях это может пригодиться.
На этом все, читайте так-же Как сделать бегущую строку в html
Всего комментариев: 0