Имитация ввода текста

Иногда перед нами встает задача создать эффект текста, появляющегося на экране символ за символом, словно кто-то его вводит. Этот прием в сочетании с моноширинными шрифтами особенно часто используется на технических веб-сайтах для имитации командной строки терминала. При правильном использовании он способен прекрасно вписаться и значительно улучшить общий дизайн страницы. Обычно для реализации такого эффекта разработчикам приходится прибегать к помощи длинного, грязного и сложного JS-кода. И несмотря на то что это всего лишь представление, использование CSS для подобного эффекта кажется недостижимой мечтой. Или все же это возможно?

		Это интересно +2	Как всё будет выглядеть в блоге: Имитация ввода текста Иногда перед нами встает задача создать эффект текста, появляющегося на экране символ за символом, словно кто-то его вводит Скопируйте код для блога: <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/poleznyie-servisyi-i-programmyi-dlya-nachinayuschih-polzovatelej/14215210/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;"> Имитация ввода текста </a> <div class="insert-intro" style="font-family:trebuchet MS;">Иногда перед нами встает задача создать эффект текста, появляющегося на экране символ за символом, словно кто-то его вводит </div> </div> Имитация ввода текста <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/poleznyie-servisyi-i-programmyi-dlya-nachinayuschih-polzovatelej/14215210/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;">Имитация ввода текста</a> <div style="font-family:trebuchet MS;">Иногда перед нами встает задача создать эффект текста, появляющегося на экране символ за символом, словно кто-то его вводит </div> </div>

webguru

30.10.2017

В избранное Пожаловаться Просмотров: 641

Комментарии ⁰

Полезные сервисы и программы для начинающих пользователей 7268

Важные темы:

Активные участники:

Последние откомментированные темы:

Имитация ввода текста

Комментарии временно отключены

Открытая группа
38977 участников