使用 HTML、CSS 和 JavaScript 创建动态打字机效果教程-js教程-PHP中文网

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

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

1. 打字机效果概述

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

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

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

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

登录后复制

在这个示例中，我们使用了一个 <h1> 标签，并为其指定了 id="typewriter-text"。JavaScript 将通过这个 id 来定位并操作该元素的内容。

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

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

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

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

登录后复制

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

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

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

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

查看详情

立即学习“Java免费学习笔记（深入）”；

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"></span>';

      // 设置延时，然后递归调用自身打印下一个字符
      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 中我们定义的 <h1> 元素的关键。使用 id 能够确保我们只操作这个特定的元素，避免影响页面上其他 <h1> 标签。
typeWriter(text, i, fnCallback) 函数:
- text: 当前正在进行打字动画的完整字符串。
- i: 当前已打印字符的索引。
- fnCallback: 当 text 完全打印完成后，将执行的回调函数。
- text.substring(0, i + 1): 每次调用时，都会截取 text 的一部分，从开头到当前索引 i 处，实现逐字增加的效果。
- + '<span aria-hidden="true"></span>': 在当前文本后面追加一个 <span> 元素，作为闪烁的光标。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 代码整合到您的项目中，即可实现打字机效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打字机效果演示</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            color: #333;
            font-size: 2em; /* 示例字体大小 */
        }

        /* 确保h1在容器内居中 */
        h1 {
            white-space: nowrap; /* 防止文本换行 */
            overflow: hidden; /* 隐藏超出容器的文本 */
            margin: 0;
            padding: 0;
        }

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

        /* 光标闪烁动画 */
        @keyframes caret {
            50% {
                border-color: transparent; /* 在动画中点时隐藏光标 */
            }
        }
    </style>
</head>
<body>
    <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"></span>';

                    // 设置延时，然后递归调用自身打印下一个字符
                    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>
</body>
</html>

登录后复制

6. 注意事项与优化

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