• Страница 1 из 1
  • 1
Модератор форума: -SAM-  
Форум » Веб-разработка » Вопросы по uCoz » Как сделать эффект набора текста на CSS (Эффект набора печатающегося текста с помощью CSS)
Как сделать эффект набора текста на CSS
maestro4966
Дата: Понедельник, 2020-03-23, 15:15 | Сообщение 1
Оффлайн
Пользователи
Сообщений:1
Награды: 0


Добрый день. Подскажите пжлста. Хочу сделать эффект набора текста как у вас в этой ст. http://zornet.ru/load....-0-9295 Не могу понять, как сделать, что бы текст переходил на другую строчку. Например, что бы текст печатался в 3 строчки. ? За ранее вам благодарен.
Страна: (PL)
Kosten
Дата: Понедельник, 2020-03-23, 15:58 | Сообщение 2
Оффлайн
Администраторы
Сообщений:29147
Награды: 62


maestro4966, рассмотрите этот вариант печатающего текста, возможно он вам подойдет для реализаций.
Страна: (RU)
Kosten
Дата: Вторник, 2020-03-24, 03:00 | Сообщение 3
Оффлайн
Администраторы
Сообщений:29147
Награды: 62


Также можно сделать так, чтоб одна строка полностью отпечаталась, и слилась, чтоб следующее появилась, как вариант.


See the Pen
Animation text with typed.js
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
-SAM-
Дата: Вторник, 2020-03-24, 19:48 | Сообщение 4
Оффлайн
Друзья сайта
Сообщений:720
Награды: 29


maestro4966, white-space: nowrap; - этот стиль там отменяет перенос на новую строку. Но удаление его не сильно поможет - потом некорректно смотрится (что там еще нужно размеры самого блока настраивать, как понял)... то есть ограничивать в размерах ширину и высоту + анимация линии неправильная - фиксированной высоты, что идёт на целые три строки (а не смещается на следующую после напечатанной буквы).

Еще подшиты темы по этому же направлению: раз, два (но это уже с использованием js).




Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи и ответы на ваши вопросы по системе uCoz.


Сообщение отредактировал
-SAM- - Среда, 2020-03-25, 05:14
Страна: (UA)
Форум » Веб-разработка » Вопросы по uCoz » Как сделать эффект набора текста на CSS (Эффект набора печатающегося текста с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: