Как создать эффекты ввода с помощью CSS
Вам не нужен JavaScript, чтобы создать классический эффект пишущей машинки. Функция CSS Step() поможет вам легко создавать типографские эффекты.
Что такое эффект пишущей машинки?
Эффект пишущей машинки — это техника анимации текста, которая имитирует процесс постепенного отображения контента, имитируя процесс набора текста, разворачивающийся перед глазами зрителя. Эффект напоминает старомодные пишущие машинки, ранние компьютерные терминалы или интерфейс командной строки (CLI).
Постепенное появление текста добавляет элемент напряжения и интриги, побуждая аудиторию обратить внимание на передаваемое сообщение.
Как функция Steps() работает в CSS
Функция Step() — это распространенная функция, используемая в CSS-анимации. Из-за этого анимация выглядит так, будто она развивается отдельными шагами, а не плавным переходом.
Step() — функция, определяющая время анимации с помощью двух параметров. Первый параметр представляет количество шагов, которые вы хотите, чтобы ваша анимация выполняла. Второй параметр определяет поведение каждого шага. Синтаксис функции Step() следующий:
функция синхронизации анимации: шаги (n, направление)
В приведенном выше блоке кода функция Step() имеет два параметра: n и направление. Параметр направления может быть start или end.
Установка направления set гарантирует, что первый шаг будет выполнен сразу после начала анимации. Между тем, установка направления на конец приведет к выполнению последнего шага, когда анимация закончится. Чтобы проиллюстрировать важность функции Step(), рассмотрим следующий HTML-код:
Приведенный выше блок кода определяет контейнер div с дочерними элементами div. Если вы хотите, чтобы дочерний элемент div скользил по экрану, вы используете такую CSS-анимацию:
.container { цвет фона: синий; } div:not(.container) { цвет фона: красный; ширина: 88 пикселей; высота: 88 пикселей; анимация: movebox 4s бесконечность; } @keyframes movebox { 100% { Transform: TranslateX(100vw); } }
В приведенном выше блоке кода используется правило @keyframes для определения перемещения с именем анимации. Затем эта анимация применяется к дочернему элементу div, заставляя его плавно перемещаться по экрану в бесконечном цикле.
Если вам не нравится плавная анимация и вы хотите добиться «прыгающего» эффекта, вы можете использовать функцию Step() следующим образом:
div:not(.container){цвет фона: красный; ширина: 88 пикселей; высота: 88 пикселей; анимация: movebox 4s бесконечность; функция синхронизации анимации: шаги (10, конец); }
Как вы можете видеть на GIF-изображении ниже, сочетание функции Step() со значением параметра 10 будет анимировать дочерний элемент div поэтапно, а не плавно. Чем больше количество шагов, тем менее прерывистой будет ваша анимация.
В приведенном выше примере предоставляется параметр направления. Однако, если вы опустите направление, браузер будет использовать end в качестве значения по умолчанию для направления.
Создайте эффект пишущей машинки
Теперь, когда вы понимаете, как работает функция Step(), пришло время применить все, что вы узнали, на практике. Создайте новую папку и дайте ей подходящее имя. В эту папку добавьте файл index.htm для разметки и файл style.css для стилизации.
В файл index.htm добавьте следующий шаблонный код:
Документ Lorem ipsum dolor сидит amet consectetur adipisicing elit. Reiciendis, tempore!
Приведенный выше блок кода определяет разметку простой веб-страницы HTML. Существует контейнер div, содержащий еще один div с фиктивным текстом.
Создание эффектов для текста
Откройте файл style.css и установите ширину контейнера div равной ширине содержимого внутри него.
.container{ширина: fit-content; }
Затем, используя правило @keyframes, определите анимацию, которая контролирует ее развитие с течением времени. Установите ширину на «0%» при 0%. При 100% установите ширину на «100%» следующим образом:
@keyframes type-text { 0% { ширина: 0%; } 100% { ширина: 100%; } }
Затем выберите элемент с именем class text и установите для его свойства переполнения значение «скрытый». Это гарантирует, что текст останется скрытым до тех пор, пока не запустится эффект набора текста. Сделав это, убедитесь, что текст остается на одной строке, установив для свойства пробелов значение nowrap. Присвойте текстовому классу моноширинный шрифт и добавьте зеленую вертикальную рамку справа от текста.
Эта граница создаст вид курсора. Установите соответствующий размер шрифта и свойства анимации для типа текста. Наконец, добавьте функцию Step() в функцию анимации-тайминга.
.text {переполнение: скрыто; пробел: nowrap; семейство шрифтов: «Courier New», Courier, моноширинный; правая граница: сплошной зеленый цвет 10 пикселей; размер шрифта: 23 пикселя; анимация: ввод-текст вперед 4 секунды; функция синхронизации анимации: шаги (40); }
Запустив код в браузере, вы увидите:
Если вам нужен более длительный эффект набора текста, вы можете настроить продолжительность анимации и количество шагов, указанные в функции шага ().
Сделать курсор анимированным
Эффект пишущей машинки почти завершен, но одна особенность все еще отсутствует: мигающий курсор. Напомним, что в последнем блоке кода правая граница была размещена на тексте, который будет использоваться в качестве курсора. Вы также можете добавить анимацию к этому курсору, используя правило @keyframes.
@keyframes курсор-мигает { 0% { бордюр-цвет: прозрачный; } 100% { border-color: green; } }
После определения пользовательской анимации добавьте имя анимации в свойства анимации на текстовом слое и установите продолжительность 0,6 секунды.
.text{ /* Другие правила стиля*/ анимация: ввод текста вперед 4 секунды, мигание курсора 0,6 секунды бесконечно; }
Теперь, когда вы запустите код, вы увидите:
Готово! Желаю вам успехов!
В приведенной выше статье вы познакомились с «Как создавать эффекты ввода с помощью CSS». СоветыНадейтесь, что эта статья вам поможет! Если эта статья кажется вам интересной и полезной, не забудьте поделиться ею. Спасибо!
