Как создать эффект типирования на CSS - полное объяснение!

Привет, товарищи разработчики!

Вы когда-нибудь ломали голову над тем, что сделать, чтобы ваш сайт или портфолио были отзывчивыми и отличались от 90% "корявых" сайтов?

Полезность отзывчивых сайтов недооценивается, так как они приклеивают ваших читателей или потенциальных клиентов к вашей странице.

##Как сделать мой сайт отзывчивым?

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

##Html

Сначала давайте посмотрим на html

<div class="text-content">
<h1>Medium is gold</h1>
</div>

Я создал контейнер div с именем "text-content" и сделал h1 его дочерним элементом.

Давайте перейдем к CSS

##CSS

body{
display:flex;
justify-content:center;
background-color:#f1f1f1;
}

Ключевой концепцией этого CSS-кода является использование атрибута flex для выравнивания кода по горизонтали, что очень важно для правильной работы кода. Селектор .text-content h1 нацелен на тег h1 внутри div с классом "text-content".

.text-content h1 {
  color: #fff;
  font-family: monospace;
  overflow: hidden; 
  border-right: .15em solid orange; 
  white-space: nowrap; 
  margin: 0 auto; 
  letter-spacing: .15em; 
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}

Атрибут overflow hidden гарантирует, что остальная часть нашего кода не будет раскрыта до окончания анимации.

Атрибут border-right дает представление о курсоре, но даже мы оба знаем, что его нет, lol.

Пробельные символы nowrap сохраняют наше содержимое на одной строке, а *margin:auto* дает нам эффект прокрутки при наборе текста.

Наконец, наша анимация создается в порядке (название, длительность, направление и итерация)

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

Наконец, свойство animation устанавливает два ключевых кадра: typing и blink-caret. Ключевой кадр typing анимирует ширину тега h1 от 0% до 100%, что создает впечатление, будто текст набирается. Ключевой кадр blink-caret анимирует цвет границы тега h1, заставляя его мигать, как курсор.

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

Спасибо, что дочитали до конца! Если у вас возникнут трудности или предложения, пожалуйста, дайте мне знать в разделе комментариев.Gracias amigo