Создание эффекта печатной машинки с помощью CSS

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

В этой статье мы рассмотрим, как создать эффект печатной машинки с помощью CSS, без обращения к JavaScript.

Содержание

HTML-код
Магия CSS
Ключевые моменты CSS-кода
Детали CSS-анимации
Пример на CodePen
Заключение

HTML-код

Наш HTML-код состоит всего из двух блоков:

<div class="container">
<div class="type">
Это эффект печатной машинки на чистом CSS
</div>
</div>

Магия CSS

Теперь давайте рассмотрим CSS-код, создающий эффект печатной машинки:

@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro&display=swap');

.container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

.type {
width: 45rem;
margin: 0;
padding: 0;
animation: typing 8s steps(45), blink 0.5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: 'Anonymous Pro', monospace;
font-size: 2em;
text-align: left;
}

@keyframes typing {
from {
width: 0;
}
}

@keyframes blink {
50% {
border-color: transparent;
}
}

Ключевые моменты CSS-кода

Моноширный шрифт: Для создания эффекта пишущей машинки используется моноширный шрифт.
Параметр steps в анимации: Параметр steps позволяет управлять количеством шагов анимации, что создает иллюзию печати текста по одному символу.

Детали CSS-анимации

Анимация typing: Эта анимация увеличивает ширину блока .type от 0 до его полной ширины в течение 8 секунд с 45 шагами, что создает эффект печати текста.
Анимация blink: Эта анимация делает курсор мигающим, меняя цвет границы справа от блока .type каждые 0.5 секунд.

Пример на CodePen

Готовый пример можно посмотреть на CodePen.

Заключение

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