ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимация набора текста при помощи CSS

Анимация набора текста при помощи CSS

Здесь узнаете, как создать красивую анимацию набора текста с использованием только HTML и CSS, где ключевые слова будут меняться на чистом CSS. А если рассматривать корректно, то здесь предложена стилистика CSS, без скриптов и библиотеки, где будет создаться оригинальная анимация для набора текста. Вероятно, вы видели этот такой тип анимации, в котором центральное место занимает текстура, что идет на многих сайты, портфолио.

Для текстовой анимации присутствует два типа текстов, которые означают, что один — это статический текст, что изначально не имеет анимации, а вот второй идет с анимацией и динамически изменяется. Здесь мы самостоятельно к анимации добавляем несколько, или как здесь идет четыре ключевые фразы. Где автоматически идет показ, как на слайдере карусели данные знаки, что вы выставили. А значит при подключении мы наблюдаем набора текста, где все выглядит довольно круто и интересно.

Все проверено по работе, по умолчанию этот эффект так выглядит. Что самостоятельно можно все красиво оформить, но советую изначально зайти на demo страницу.

Установка:

HTML

Код

<div class="naboku_tekstus">
  <div class="stadik_kidsa">ZORNET.RU</div>
  <ul class="tekstysa_kilopas">
  <li><span>Скрипты</span></li>
  <li><span>Шаблоны</span></li>
  <li><span>Скачать</span></li>
  <li><span>Стили CSS</span></li>
  </ul>
  </div>

CSS

Код

.naboku_tekstus{
  display: flex;
}
.naboku_tekstus .stadik_kidsa{
  color: #fff;
  font-size: 60px;
  font-weight: 400;
}
.naboku_tekstus .tekstysa_kilopas{
  margin-left: 15px;
  height: 90px;
  line-height: 90px;
  overflow: hidden;
}
.tekstysa_kilopas li{
  list-style: none;
  color: #FC6D6D;
  font-size: 60px;
  font-weight: 500;
  position: relative;
  top: 0;
  animation: slide 12s steps(4) infinite;
}
@keyframes slide {
  100%{
  top: -360px;
  }
}
.tekstysa_kilopas li span{
  position: relative;
  margin: 5px 0;
  line-height: 90px;
}
.tekstysa_kilopas li span::after{
  content: "";
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  background: #343F4F;
  border-left: 2px solid #FC6D6D;
  animation: typing 3s steps(10) infinite;
}
@keyframes typing {
  40%, 60%{
  left: calc(100% + 30px);
  }
  100%{
  left: 0;
  }
}

Если вам понравился такой стиль анимация, то здесь можете подумать об использовании ее в своих проектах. Ведь просматривая данный эффект, то можно заметить, что он отлично подойдет на многие тематические сайты.

Демонстрация

01 Августа 2021 Загрузок: 3 Просмотров: 1183 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0