14.03.2023 в 18:05

Эффект набора текста с помощью 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 дает представление о курсоре, но даже мы оба знаем, что его нет.

whitespace nowrap удерживает наш контент в одной строке, а margin:auto дает нам эффект прокрутки по мере увеличения набора текста.

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

@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, заставляя его мигать, как курсор.

Таким образом, эффект набора текста — это простой, но эффективный способ выделить ваш веб-сайт или портфолио среди остальных.

#CSS #Начинающим

143

Войти на сайт

Эффект набора текста с помощью CSS

Html

CSS