集成css/js打字机效果，jsfiddle

<div id="typewriter"></div>

#typewriter {
  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;
}

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

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

var text = "Hello, World!"; // 要显示的文字
var speed = 100; // 打字速度（每个字母的显示间隔时间）

function typeWriter() {
  var i = 0;
  var typewriter = document.getElementById("typewriter");
  typewriter.innerHTML = ""; // 清空容器中的内容

  function type() {
    if (i < text.length) {
      typewriter.innerHTML += text.charAt(i);
      i++;
      setTimeout(type, speed);
    }
  }

  type();
}

typeWriter();