45、打字动画

打字动画是对逐帧动画和闪烁动画的一种应用，核心思路是使用动画改变容器的宽度，容器自身带有不换行和超出隐藏效果。
实现打字动画，需要用到ch单位，这个单位表示0字符的宽度，所以需要使用等宽字体

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

h1{
  font-family: Consolas; // 设置等宽字体
  width:26ch;  // 以内容字符数量来设置元素宽度
  border-right: 1px solid currentColor; // 又边框模拟闪烁光标
  white-space: nowrap;
  overflow: hidden;
  animation: typing 4s steps(26),
             border 1s 4s steps(1) infinite;
}
@keyframes typing {
  from {
    width: 0;
  }
}
@keyframes border {
  50% {
    border-color:transparent;
  }
}