CSS реализует анимацию ввода текста (+1 объяснение на местном языке)

внешний интерфейс JavaScript анимация CSS

представлять

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

начать

исходное изображение

эммммм... пожалуйста, не обращайте внимания на мой шрифт

  • Идея 1: Измените ширину этого текста с 0 на фактическую ширину.
.title{
  ...
  animation: typing 6s;
}
@keyframes typing{
  from {
    width: 0;
  }
}

эммм, забыл отключить перенос строк и обрезание лишнего текста

Исправлять

.title{
  ...
  white-space: nowrap;
  overflow: hidden;
  animation: typing 6s;
}
@keyframes typing{
  from {
    width: 0;
  }
}

Выглядит хорошо, но этого недостаточно. Мы надеемся, что персонажи могут выйти один за другим. Поразмыслив над этим, в анимации есть такая вещь, как шаги. : Насколько она велика? Число показывает, сколько кадров нужно выполнить. Например, steps(5) означает, что анимация будет разделена на 5 кадров для выполнения.

Даже если мы можем заставить анимацию работать кадр за кадром, как нам заставить символы появляться один за другим?

Ответ таков... Единица ch, о которой никто не заботится, это новая единица измерения CSS3, что означает ширину "0", и тогда, я думаю, появится настоящее решение!

В моноширинном шрифте глиф "0" имеет ту же ширину, что и все остальные глифы.

Исправлять

.title{
  ...
  width: 17ch; //别忘了把空格算上!
  white-space: nowrap;
  overflow: hidden;
  animation: typing 6s steps(17);  //steps里为你的字符数
}
@keyframes typing{
  from {
    width: 0;
  }
}

Может нам тоже нужен мигающий курсор? Затем сохраните его для следующего раза (если я его не забыл)

Обновлена ​​статья о флеш-анимации.кликните сюда

Перевод статьи адаптирован из CSS для раскрытия секрета

Категории