本教程详细介绍了如何利用 HTML 结构、CSS 动画和 JavaScript 逻辑，在网页上实现一个引人注目的打字机文本效果。文章将逐步指导读者创建动态逐字显示文本、模拟光标闪烁以及在多个文本之间循环切换的完整解决方案，并提供清晰的代码示例和关键实现细节，帮助开发者轻松为网站增添互动性和视觉吸引力。

1. 打字机效果概述

打字机效果是一种常见的网页动态文本展示方式，它通过模拟打字机逐字输出文本的过程，为用户带来独特的视觉体验。这种效果常用于网站标题、口号或关键信息展示，能够有效吸引用户的注意力。本教程将引导您使用纯前端技术（HTML、CSS 和 JavaScript）构建一个功能完善、可定制的打字机效果。

2. HTML 结构：定义文本容器

首先，我们需要在 HTML 中定义一个元素来承载动态生成的文本。为了精确控制和避免影响页面上其他同类型元素，强烈建议为该元素指定一个唯一的 id。

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

在这个示例中，我们使用了一个

标签，并为其指定了 id="typewriter-text"。JavaScript 将通过这个 id 来定位并操作该元素的内容。

3. CSS 样式：实现光标和动画

打字机效果通常伴随着一个闪烁的光标。我们将利用一个 元素来模拟光标，并通过 CSS 动画使其周期性地闪烁。

/* 光标样式 */
#typewriter-text span {
  border-right: .05em solid; /* 模拟光标 */
  animation: caret 1s steps(1) infinite; /* 应用闪烁动画 */
}

/* 光标闪烁动画 */
@keyframes caret {
  50% {
    border-color: transparent; /* 在动画中点时隐藏光标 */
  }
}

• border-right: .05em solid;: 为 元素添加一个右边框，模拟打字机光标的竖线。.05em 提供了一个合适的宽度。
• animation: caret 1s steps(1) infinite;: 将名为 caret 的动画应用到 元素上。
  • 1s: 动画持续时间为 1 秒。
  • steps(1): 动画在 1 秒内只执行 1 步，这使得边框颜色在显示和透明之间瞬间切换，产生硬闪烁效果。
  • infinite: 动画无限循环。
• @keyframes caret: 定义了名为 caret 的关键帧动画。
  • 50%: 在动画进行到 50% 的时候，将 border-color 设置为 transparent，使光标消失。在动画的其余时间（0%到50%和50%到100%），光标会显示。

4. JavaScript 逻辑：驱动打字动画

JavaScript 是实现打字机效果的核心。它负责逐字输出文本、控制速度、切换不同的文本内容，并确保动画的流畅性。

document.addEventListener('DOMContentLoaded', function() {
  // 定义要进行打字动画的文本数组
  var dataText = ["VISIBILITÀ.", "NUOVI INGAGGI.", "NUOVI FAN.", "PIÙ VISIBILITÀ!", "SUCCESSO!"];
  // 获取承载文本的元素
  var targetElement = document.getElementById('typewriter-text');

  /**
   * 逐字打印文本的函数
   * @param {string} text 当前要打印的完整文本
   * @param {number} i 当前打印到的字符索引
   * @param {function} fnCallback 当文本打印完成后调用的回调函数
   */
  function typeWriter(text, i, fnCallback) {
    // 检查文本是否打印完成
    if (i ';

      // 设置延时，然后递归调用自身打印下一个字符
      setTimeout(function() {
        typeWriter(text, i   1, fnCallback);
      }, 90); // 90毫秒的打字速度
    } else if (typeof fnCallback === 'function') {
      // 文本打印完成，延时后调用回调函数
      setTimeout(fnCallback, 2000); // 文本显示2秒后调用回调
    }
  }

  /**
   * 启动文本动画序列的函数
   * @param {number} i 当前要显示的文本在dataText数组中的索引
   */
  function StartTextAnimation(i) {
    // 检查当前索引的文本是否存在
    if (typeof dataText[i] === 'undefined') {
      // 如果所有文本都已显示，则在较长时间后从头开始循环
      setTimeout(function() {
        StartTextAnimation(0);
      }, 20000); // 所有文本循环完后等待20秒再重新开始
    } else {
      // 如果文本存在，则启动打字动画
      typeWriter(dataText[i], 0, function() {
        // 当前文本打字动画完成后，启动下一个文本的动画
        StartTextAnimation(i   1);
      });
    }
  }

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

JavaScript 关键点解析：

• document.addEventListener('DOMContentLoaded', ...): 确保在 DOM 完全加载和解析后才执行 JavaScript 代码，防止在元素尚未存在时尝试操作它们。
• dataText: 这是一个字符串数组，包含了所有需要通过打字机效果展示的文本内容。您可以根据需求修改或扩展此数组。
• targetElement = document.getElementById('typewriter-text'): 这是获取 HTML 中我们定义的

  元素的关键。使用 id 能够确保我们只操作这个特定的元素，避免影响页面上其他

  标签。

• typeWriter(text, i, fnCallback) 函数:
  • text: 当前正在进行打字动画的完整字符串。
  • i: 当前已打印字符的索引。
  • fnCallback: 当 text 完全打印完成后，将执行的回调函数。
  • text.substring(0, i 1): 每次调用时，都会截取 text 的一部分，从开头到当前索引 i 处，实现逐字增加的效果。
  • '': 在当前文本后面追加一个 元素，作为闪烁的光标。aria-hidden="true" 属性是为了提高可访问性，告知屏幕阅读器该元素是装饰性的，不应被朗读。
  • setTimeout(..., 90): 控制打字速度。每隔 90 毫秒，typeWriter 函数会再次调用自身，打印下一个字符。
  • else if (typeof fnCallback === 'function'): 当一个文本完全打印完成后，会等待 2000 毫秒（2秒），然后调用 fnCallback，通常用于启动下一个文本的动画。
• StartTextAnimation(i) 函数:
  • i: dataText 数组中当前要处理的文本的索引。
  • if (typeof dataText[i] === 'undefined'): 检查是否所有文本都已显示完毕。如果是，则在 20 秒后重新从 dataText 数组的第一个文本开始循环。
  • typeWriter(dataText[i], 0, function() { ... }): 调用 typeWriter 函数来显示 dataText 数组中的当前文本。当 typeWriter 完成时，其回调函数会调用 StartTextAnimation(i 1) 来启动下一个文本的动画。

5. 完整代码示例

将上述 HTML、CSS 和 JavaScript 代码整合到您的项目中，即可实现打字机效果。

    
    
    
    


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

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 定义要进行打字动画的文本数组
            var dataText = ["VISIBILITÀ.", "NUOVI INGAGGI.", "NUOVI FAN.", "PIÙ VISIBILITÀ!", "SUCCESSO!"];
            // 获取承载文本的元素
            var targetElement = document.getElementById('typewriter-text');

            /**
             * 逐字打印文本的函数
             * @param {string} text 当前要打印的完整文本
             * @param {number} i 当前打印到的字符索引
             * @param {function} fnCallback 当文本打印完成后调用的回调函数
             */
            function typeWriter(text, i, fnCallback) {
                // 检查文本是否打印完成
                if (i < text.length) {
                    // 更新目标元素的innerHTML，添加当前字符并保留光标
                    targetElement.innerHTML = text.substring(0, i   1)   '<span aria-hidden="true">';

                    // 设置延时，然后递归调用自身打印下一个字符
                    setTimeout(function() {
                        typeWriter(text, i   1, fnCallback);
                    }, 90); // 90毫秒的打字速度
                } else if (typeof fnCallback === 'function') {
                    // 文本打印完成，延时后调用回调函数
                    setTimeout(fnCallback, 2000); // 文本显示2秒后调用回调
                }
            }

            /**
             * 启动文本动画序列的函数
             * @param {number} i 当前要显示的文本在dataText数组中的索引
             */
            function StartTextAnimation(i) {
                // 检查当前索引的文本是否存在
                if (typeof dataText[i] === 'undefined') {
                    // 如果所有文本都已显示，则在较长时间后从头开始循环
                    setTimeout(function() {
                        StartTextAnimation(0);
                    }, 20000); // 所有文本循环完后等待20秒再重新开始
                } else {
                    // 如果文本存在，则启动打字动画
                    typeWriter(dataText[i], 0, function() {
                        // 当前文本打字动画完成后，启动下一个文本的动画
                        StartTextAnimation(i   1);
                    });
                }
            }

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

6. 注意事项与优化

• 性能考量: 对于非常长的文本或大量同时进行的打字机效果，频繁操作 innerHTML 可能会有轻微的性能开销。在大多数情况下，对于少量文本，这种方法是完全可接受的。
• 可访问性: aria-hidden="true" 属性确保了屏幕阅读器不会朗读闪烁的光标，提高了可访问性。
• 定制化:
  • 打字速度: 调整 typeWriter 函数中的 setTimeout 延迟时间（例如 90 毫秒）来改变打字速度。
  • 文本显示时间: 调整 typeWriter 函数中调用 fnCallback 前的 setTimeout 延迟时间（例如 2000 毫秒）来改变每个文本显示的时长。
  • 循环间隔: 调整 StartTextAnimation 函数中 StartTextAnimation(0) 前的 setTimeout 延迟时间（例如 20000 毫秒）来改变所有文本循环完后重新开始的间隔。
  • 光标样式: 修改 CSS 中 span 的 border-right 属性可以改变光标的颜色、粗细。
  • 文本内容: 随时修改 dataText 数组中的字符串，以适应您的内容需求。
• 多个打字机效果: 如果您需要在同一个页面上实现多个独立的打字机效果，可以考虑将 JavaScript 逻辑封装成一个可复用的函数或类，并通过传入不同的 id 或元素引用来初始化它们。

7. 总结

通过本教程，您已经掌握了如何利用 HTML 定义结构、CSS 实现光标动画以及 JavaScript 驱动文本逐字显示和循环的关键技术。这种打字机效果不仅能提升网站的视觉吸引力，还能有效传达信息，为用户带来更具互动性的浏览体验。您可以根据自己的需求调整代码中的参数，创建出独一无二的动态文本效果。

以上是使用 HTML、CSS 和 JavaScript 创建动态打字机效果教程的详细内容。更多信息请关注PHP中文网其他相关文章！