js+css实现打字机效果（大模型网页常用）

在大模型网站，经常能看见类似下图的打字机效果，这是我做的一个示例：

如何做出来呢？这个示例里，打字机的效果用js函数实现，文字最后的闪烁光标是span并修改样式来实现。代码如下：

/**
 * 实现打字机效果的函数（不含最后的光标，光标需要自己用css实现）
 * @param container 接收当前显示内容的对象
 * @param content 要展示的完整一段话内容
 * @param typeIntervalTime 间隔多久打出一个字（毫秒，下同）
 * @param restTime 当内容打印完成后，等待多久后重新打印（为负数则不再重新打印）
 */
export function typewriterEffect(container: Ref<string>, content: string, typeIntervalTime: number = 160, restTime: number = 3200) {
  let index = 0
  let temp = setInterval(() => {
    container.value += content.at(index)
    index++
    if (index === content.length) {
      clearInterval(temp)
      if (restTime >= 0) {
        setTimeout(() => {
          container.value = ''
          typewriterEffect(container, content)
        }, restTime)
      }
    }
  }, typeIntervalTime)
}

// 大模型字符输入内容
const text1 = '我是Kimi，是月之暗面开发的大模型哟！'
const titleText = ref<string>('')
typewriterEffect(titleText, text1)

<div id="title">
  <span id="text-span" v-html="titleText"></span>
  <span id="cursor-span"></span>
</div>

#title {
   position: absolute;
   top: 220px;
   left: 50%;
   transform: translateX(-50%);
   width: 800px;

   font-family: Microsoft YaHei;
   font-size: 24px;
   font-weight: 550;
   line-height: 150%;
   text-align: center;
   letter-spacing: 0em;
   color: #3D3D3D;

   #text-span {
     display: inline-block;
   }

   #cursor-span {
     display: inline-block;
     margin-bottom: -3px;
     margin-left: 2px;
     width: 24px;
     height: 2px;
     background: rgb(79, 159, 255);
     animation: cursorBlink 1s linear infinite;

     @keyframes cursorBlink {
       10% { opacity: 0.9; }
       20% { opacity: 0.8; }
       30% { opacity: 0.7; }
       40% { opacity: 0.6; }
       50% { opacity: 0.5; }
       60% { opacity: 0.4; }
       70% { opacity: 0.3; }
       80% { opacity: 0.2; }
       90% { opacity: 0.1; }
       100% { opacity: 0; }
    }
}