使用HTML、CSS和JavaScript实现动态打字机效果教程

<h1 id="typewriter-text"></h1>

span.typewriter-cursor {
  border-right: .05em solid; /* 光标样式，一个细边框 */
  animation: caret 1s steps(1) infinite; /* 定义闪烁动画 */
}

@keyframes caret {
  50% {
    border-color: transparent; /* 动画50%时边框透明，实现闪烁 */
  }
}

document.addEventListener('DOMContentLoaded', function() {
  // 要循环显示的文本数组
  const dataText = [
    "VISIBILITÀ.",
    "NUOVI INGAGGI.",
    "NUOVI FAN.",
    "PIÙ VISIBILITÀ!",
    "SUCCESSO!"
  ];
  const targetElement = document.getElementById("typewriter-text"); // 获取目标H1元素
  const typingSpeed = 90; // 每个字符打出的间隔时间（毫秒）
  const textDisplayDelay = 2000; // 每个文本显示完毕后的停留时间（毫秒）
  const loopRestartDelay = 20000; // 所有文本循环完毕后重新开始的延迟（毫秒）

  /**
   * 逐字显示文本的函数
   * @param {string} text - 当前要显示的文本
   * @param {number} charIndex - 当前正在显示的字符索引
   * @param {function} fnCallback - 文本显示完毕后要执行的回调函数
   */
  function typeWriter(text, charIndex, fnCallback) {
    // 检查文本是否已全部显示
    if (charIndex < text.length) {
      // 将当前字符添加到目标元素，并插入光标span
      targetElement.innerHTML = text.substring(0, charIndex + 1) + '<span class="typewriter-cursor" aria-hidden="true"></span>';

      // 延迟后递归调用自身，显示下一个字符
      setTimeout(function() {
        typeWriter(text, charIndex + 1, fnCallback);
      }, typingSpeed);
    } else if (typeof fnCallback === 'function') {
      // 文本显示完毕，延迟后调用回调函数
      setTimeout(fnCallback, textDisplayDelay);
    }
  }

  /**
   * 启动文本动画循环的函数
   * @param {number} textIndex - dataText数组中当前要显示的文本索引
   */
  function StartTextAnimation(textIndex) {
    // 如果当前文本索引超出数组范围，表示所有文本已显示完毕，等待一段时间后从头开始
    if (typeof dataText[textIndex] === 'undefined') {
      setTimeout(function() {
        StartTextAnimation(0); // 从第一个文本重新开始
      }, loopRestartDelay);
      return; // 提前返回，避免后续执行
    }

    // 检查当前文本是否存在（防止空字符串或undefined）
    if (textIndex < dataText.length) {
      // 启动当前文本的打字机动画
      typeWriter(dataText[textIndex], 0, function() {
        // 当前文本动画完成后，启动下一个文本的动画
        StartTextAnimation(textIndex + 1);
      });
    }
  }

  // 页面加载完成后，启动第一个文本的动画
  StartTextAnimation(0);
});