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

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

задний план

Эта статья унаследована от предыдущей«CSS реализует анимацию набора текста (+1 народное объяснение)»

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

Когда дело доходит до мерцающей анимации, многие люди могут подумать о<blink>этот ярлык илиtext-decoration: blinkЭто вещь, но у обоих есть большие ограничения, как мы, «профессиональные» разработчики интерфейса, можем быть довольны этим? Поэтому нам пришлось искать другой путь.

начать

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

Шрифт стал нормальным~

  • Идея 1:Сделать элемент прозрачным и обратно
.title{
  animation: blink 1s 3;
}
@keyframes blink{
  to {
    color: transparent;
  }
}

Давайте посмотрим на эту анимацию с помощью Animation в Chrome DevTools.

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

.title{
  animation: blink 1s 3;
}
@keyframes blink{
  50% {
    color: transparent;
  }
}

немного удобнее

Однако читатели с длинными глазами должны уметь определить по картинке, что процесс анимации ускорен, из-за чего анимация выглядит неестественно.

Детская обувь, прочитавшая мою прошлую статью, обязательно придумает ступеньки~ Давайте попробуем.

.title{
  animation: blink 1s 3 steps(1);
}
@keyframes blink{
  50% {
    color: transparent;
  }
}

Идеально

Обратите внимание, что здесь с детской обувью to, steps(1) означает, что переключение значения цвета происходит только в конце цикла анимации, поэтому эффект будет таким:

Глупый, твоя анимация вообще не будет мигать

рассмотрение

Добавление мигающего курсора упоминалось в конце предыдущей статьи, так что давайте воспользуемся знаниями, которые мы узнали выше, чтобы реализовать его~

.title{
  ...
  width: 17ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid; //不指定颜色，使光标和文字颜色一致
  animation: typing 10s steps(17),
             blink 1s steps(1) infinite; //infinite用来使动画无限循环
}
@keyframes typing{
  from {
    width: 0;
  }
}
@keyframes blink{
  50% {
    border-color: transparent;
  }
}

Толстый кишечник идеален

Из-за шрифта и других причин отображение эффекта не очень хорошее, но это должно быть лучшим решением, его также можно поддерживать через JS, поэтому я не буду говорить об этом здесь.

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

Категории