如何实现循环往复的Typewriter效果并隐藏闪烁光标

修改要点： #

• 隐藏光标：移除.typewriter中的光标边框样式
• 循环动画：调整typing动画逻辑，让文本完成打字后自动“收回”（宽度回归0），再重复打字流程；同时给动画添加infinite属性实现循环播放
• 移除光标闪烁动画：删除原有的blink-caret相关代码

修改后的完整代码 #

CSS

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: 0.15em;
  /* 总时长7秒：前3.5秒打字，后3.5秒收回，循环执行 */
  animation: typing 7s steps(40, end) infinite;
}

@keyframes typing {
  0% {
    width: 0;
  }
  /* 前50%时间完成打字 */
  50% {
    width: 100%;
  }
  /* 后50%时间收回文本，回到初始状态 */
  100% {
    width: 0;
  }
}

HTML

<div class="typewriter">
  <h1 style="font-size: 26px">用爱制作的美食</h1>

  <p style="font-size: 18px">
    Goo's Delights是博尔德市的现代人气餐厅，2015年开业以来，凭借出色的服务和对高品质食物的坚守，斩获多项大奖。我们致力于凝聚社区力量，同时为大家奉上最优质的美食，如需更多信息请联系我们。
  </p>
</div>

补充说明 #

• 你可以根据文本实际长度，调整steps()的数值和动画总时长，让打字/收回的速度更自然
• 文本内容已翻译为中文，保留原意不变

内容的提问来源于stack exchange，提问作者Swayam Jain