CSS实现打字效果

网页设计变得越来越有创意。在 CSS 动画的协调下，你的网页会像活的一样。在这个例子中，我们将使用 animation 和 @keyframes 属性去实现打字效果。

具体来说，在这个演示中，我们通过 steps()属性来实现分割文本的效果。

首先，你必须指定 step() 中传入的数量，在这个例子中就是文本的长度。

接着，第二步，我们使用 @keyframes 去声明什么时候开始执行动画。

如果你在文本 Typing effect for text 后面添加内容，而不改变 steps() 中的数字，将不会产生这种效果。这种效果并不是特别新鲜。然而，很多开发者却使用 JavaScript 库去实现，而不是使用 CSS …

• steps 可以理解我动画通过 steps 指定的步数去完成！

• monospace字体下等宽字体 ********ch 单位（1ch就是0的宽度（应该也是一个空格/英文字母的宽度）。3ch宽的div就只能装下三个0，在字体为等宽字体的情况下，一个汉字的宽度为2ch）

  ![图片中的这个div的宽与高都是5ch。]

  图片中的这个div的宽与高都是5ch。

<div class="typing">
    <div class="typing-effect">
      I have a great dream!
    </div>
</div>

效果！

body{
  min-height:100vh;
  background-color:#fff000;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:33px;
}
.typing {
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.typing-effect {
  width: 22ch; /*和字体宽度保持一致，或者可以大一点*/
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  animation: typing 2s steps(22)  /* 用来分步执行动画！ */
    , effect .5s step-end infinite alternate; /* 边框透明度闪烁效果！ */
}

@keyframes typing {
  from {
    width: 0;
  }
}

@keyframes effect {
  50% {
    border-color: transparent;
  }
}

当然你可以 通过指定其他第一个分步，往复完成打字

animation: typing 2s steps(22) infinite alternate /* 用来分步执行动画！ */
    , effect .5s step-end infinite alternate; /* 边框透明度闪烁效果！ */