Самопроизвольно печатающийся текст



Здравствуйте друзья и читатели блога. В одном из своих тестовых блогов нашла код печатающегося текста и решила предложить Вам, а вдруг кому-то пригодится для новостей блога или другой не менее важной информации. Пример смотрите ниже:

Главная причина стресса-ежедневный контакт с идиотами...

Код HTML можно установить на страницы сообщений или дизайн добавить гаджет. Чтобы установить в сообщении, в редакторе перейдите по вкладке HTML и вставьте скопированный ниже код.

<p class="text-typing">здесь ваш текст...</p>

<style>.text-typing
{
    width: 40em;
    color:#006400;
    font-size: 22px;
    font-family: 'Marck Script', cursive;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 5s steps(50, end);
    animation: type 10s steps(150, end);
}
@keyframes type{
    from { width: 0; }
}

@-webkit-keyframes type{
    from { width: 0; }
}</style>

Выделенные жирным значения в CSS можно изменить. При желании добавьте рамочку или фон. Виды рамок смотрите в содержании, ярлык-рамки. Прекрасно смотрится текст с нижней границей рамки, линия плавно подчеркивает текст, если этого текста не так много.

Настройка стилей CSS для самопроизвольно печатающегося текста

Добавьте значение: border-bottom:2px solid #f00;

Самопроизвольно текст пишется при каждом открытии страницы. На примере выше все поймете. 

Стиль CSS желательно вставить в конце страницы, сам текст в любом месте (выделено голубым). В дизайне добавить гаджет также: CSS сохраните в футере блога, а гаджет с текстом в нужное место.

На все вопросы отвечу в комментариях или работает форма контактов. На сегодня вся информация. Всем всего доброго.

Рекомендую почитать статьи по теме:

Text.ru - 100.00%





Автор статьи ✎ Olga Protasova Выпуск ✹ 4/22/2018 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий


Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь Генератором HTML кода


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *