Анимация набора текста на CSS
На этом уроке разберем как можно имитировать ввод текста с клавиатуры с помощью CSS анимации. Эффект печатающегося текста способен оживить вашу веб-страницу, не прилагая особых усилий. Анимация будет запускаться один раз при при загрузке страницы и этого вполне достаточно.
HTML разметка
Создадим разметку из контейнера для текста с классом wrapper и из блока самого текста с классом text.
<div class="wrapper">
<div class="text">Анимация набора текста на CSS</div>
</div>
CSS стили
Выравниваем наш текст по центру и делаем отступ сверху.
.wrapper {
display: flex;
justify-content: center;
margin-top: 30px;
}
Теперь стилизуем сам печатающийся текст. В конце строки для реалистичности поставим курсор. Изобразить курсор можно с помощью рамки. Отобразим только правую сторону рамки border-right. Использование моношириного шрифта не преподнесет никаких сюрпризов, поскольку у данного шрифта одинаковая ширина маленьких и заглавных букв.
.text {
color: white;
font-family: monospace;
font-size: 30px;
white-space: nowrap; /* не переносить текст на новую строку */
overflow: hidden; /* скрываем переполнение контентом */
border-right: 3px solid white; /* рисуем курсор */
}
Создание анимации для курсора
Объявим анимацию через правило @keyframes и создадим три ключевых кадра анимации: первый кадр (0%) - курсор белого цвета, второй кадр (50%) - курсор прозрачного цвета, третий кадр (100%) - курсор белого цвета. В итоге мы получим мигающий курсор.
@keyframes cursor {
0%{
border-color: white;
}
50%{
border-color: transparent;
}
100%{
border-color: white;
}
}
Применим анимацию с названием cursor к тексту. Для этого добавим к стилям новую строку, где cursor (имя анимации), 0.75s (время длительности анимации), step-end (названии функции способа анимации) и infinite (бесконечная анимация).
.text {
...
animation: cursor 0.75s step-end infinite;
}
Создание анимации набора текста
Суть анимации текста состоит в изменении ширины текста от нуля символов до количества символов включая пробелы, самого текста. Напишем новой правило @keyframes, состоящее из одного кадра.
@keyframes printed_text {
from{
width: 0;
}
}
Наш текст состоит из 29 символов. Добавим новой свойство в стили с классом text.
.text {
...
width: 29ch;
}
А еще добавим через запятую новую анимацию printed_text, указав в параметрах функции steps количество символов у текста.
.text {
...
animation: cursor 0.75s step-end infinite,
printed_text 5s steps(29);
}
Код класса text целиком.
.text {
width: 29ch;
color: white;
font-family: monospace;
font-size: 30px;
white-space: nowrap; /* не переносить текст на другую строку */
overflow: hidden; /* скрываем переполнение контентом */
border-right: 3px solid white; /* рисуем курсор */
animation: cursor 0.75s step-end infinite,
printed_text 5s steps(29);
}
-
Создано 13.01.2021 10:22:03
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.