SOURCE

<div class="typewriter">
  前端文字出现打字机效果可以通过CSS3的@keyframes和animation属性实现。具体步骤如下：

首先在HTML中创建一个包含需要显示打字机效果的文本内容的容器，例如一个元素。

接着使用CSS设置该容器的样式，例如设置其font-size（字号）、color（颜色）等。

使用@keyframes定义动画效果，可分为多个关键帧（即动画执行过程中的不同状态），每个关键帧可以设定不同的CSS样式。

在容器的CSS样式中使用animation属性将定义好的动画效果应用到该容器中，并指定动画执行的时间、重复次数、延迟等参数。

以下是一个简单的示例代码，演示如何实现打字机效果：
</div>

.typewriter {
    white-space: pre;
    overflow: hidden;
    display: inline-block;
  font-size: 24px;
  color: #333;
  overflow: hidden; /* 隐藏超出容器范围的文本 */
  border-right: .15em solid orange; /* 添加光标效果 */
  white-space: nowrap; /* 禁止文本换行 */
  margin: 0 auto; /* 居中显示 */
  letter-spacing: .15em; /* 字符间距 */
  animation:
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

.typewriter {
}


@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}