CSS -使居中文本看起来像打字机

<style>
  .typewriter {
    overflow: hidden; /* 隐藏溢出部分 */
    white-space: nowrap; /* 不换行 */
    animation: typing 4s steps(40) infinite;
  }

  @keyframes typing {
    from {
      width: 0; /* 初始宽度为0 */
    }
    to {
      width: 100%; /* 最终宽度为100% */
    }
  }

  /* 添加光标效果 */
  .typewriter::after {
    content: "|"; /* 光标样式 */
    animation: blink 0.7s infinite;
  }

  @keyframes blink {
    0%, 100% {
      opacity: 0; /* 光标透明度为0 */
    }
    50% {
      opacity: 1; /* 光标透明度为1 */
    }
  }
</style>

<div class="typewriter">居中文本</div>