本文详细介绍了如何利用 HTML 结构、CSS 动画和 JavaScript 逻辑实现一个动态的打字机文本效果。教程涵盖了 HTML 元素的设置、CSS 光标闪烁动画的实现，以及 JavaScript 中文本数组管理、字符逐一输出和动画循环的关键函数，确保文本内容能被精确地逐字显示并循环播放。
引言
在网页设计中，动态效果能够显著提升用户体验和页面的吸引力。打字机效果（typewriter effect）便是其中一种常见的动画，它模拟了文本逐字输入的过程，常用于突出关键信息、制作引导语或增加页面的趣味性。本教程将指导您如何结合 html、css 和 javascript，从零开始构建一个可自定义的打字机文本动画。
1. HTML 结构：定义文本容器
首先，我们需要一个 HTML 元素来承载将要动态显示的文本。为了精确控制打字机效果的作用范围，我们强烈建议为该元素指定一个唯一的 id。在本例中，我们将使用一个
标签，并为其设置 id=”typewriter-text”。
打字机效果
打字机效果
请注意，初始时
标签内部可以为空，因为文本内容将完全由 JavaScript 动态生成。
2. CSS 样式：实现闪烁光标
打字机效果的一个重要组成部分是文本末尾闪烁的光标。我们可以通过 CSS 来实现这个效果。我们将利用一个 元素来模拟光标，并通过 CSS 动画使其周期性地改变边框颜色，从而产生闪烁感。
在 JavaScript 中，我们将动态地将这个 元素添加到当前文本的末尾。为了确保它不会被屏幕阅读器误读为实际文本内容，我们还会添加 aria-hidden=”true” 属性。
立即学习“Java免费学习笔记（深入）”；
/* style.css */#typewriter-text { font-family: monospace; /* 保持等宽字体，使光标位置稳定 */ white-space: nowrap; /* 防止文本换行 */ overflow: hidden; /* 隐藏超出容器的文本，虽然在这里不直接作用于打字机效果 */ display: inline-block; /* 确保h1可以被span撑开 */}#typewriter-text span { border-right: .05em solid; /* 光标样式：右边框 */ animation: caret 1s steps(1) infinite; /* 应用光标闪烁动画 */}@keyframes caret { 50% { border-color: transparent; /* 动画50%时，边框变为透明 */ }}
border-right: .05em solid;：创建了一个细长的右边框，模拟打字光标。animation: caret 1s steps(1) infinite;：将名为 caret 的动画应用于光标。1s：动画持续时间为1秒。steps(1)：指定动画在一步内完成，这意味着它会立即从一种状态跳到另一种状态，而不是平滑过渡，这对于闪烁效果至关重要。infinite：动画无限循环。@keyframes caret：定义了 caret 动画的关键帧。在动画进行到50%时，光标的边框颜色变为透明，从而实现了闪烁效果。
3. JavaScript 逻辑：核心动画实现
JavaScript 是实现打字机效果的核心。它负责管理要显示的文本内容、逐字输出文本、控制动画速度以及处理文本序列的循环播放。
我们将把所有 JavaScript 代码放在 DOMContentLoaded 事件监听器中，以确保 DOM 完全加载后再执行脚本。
// script.jsdocument.addEventListener('DOMContentLoaded', function(event) { // 定义要进行打字机效果的文本数组 const dataText = [ "VISIBILITÀ.", "NUOVI INGAGGI.", "NUOVI FAN.", "PIÙ VISIBILITÀ!", "SUCCESSO!" ]; const targetElement = document.getElementById('typewriter-text'); // 获取目标元素 /** * 实现单个字符串的打字机效果 * @param {string} text - 要显示的字符串 * @param {number} i - 当前字符索引 * @param {function} fnCallback - 文本完成时的回调函数 */ function typeWriter(text, i, fnCallback) { // 检查文本是否已全部显示 if (i < text.length) { // 将下一个字符添加到目标元素，并附加闪烁光标 targetElement.innerHTML = text.substring(0, i + 1) + ''; // 设置延迟，然后递归调用自身以显示下一个字符 setTimeout(function() { typeWriter(text, i + 1, fnCallback); }, 90); // 字符显示速度，单位毫秒 } // 如果文本已显示完毕，并且存在回调函数 else if (typeof fnCallback === 'function') { // 在短暂延迟后调用回调函数 setTimeout(fnCallback, 2000); // 文本显示完毕后等待2秒 } } /** * 启动文本数组的打字机动画序列 * @param {number} i - dataText 数组的当前索引 */ function StartTextAnimation(i) { // 如果当前索引超出 dataText 数组范围，则循环回到第一个文本 if (i >= dataText.length) { setTimeout(function() { StartTextAnimation(0); // 循环回到数组开头 }, 20000); // 等待20秒后重新开始整个序列 return; // 结束当前函数执行 } // 确保 dataText[i] 存在（即不是 undefined） if (dataText[i]) { // 开始对当前文本进行打字机动画 typeWriter(dataText[i], 0, function() { // 当前文本动画完成后，启动下一个文本的动画 StartTextAnimation(i + 1); }); } } // 启动文本动画序列 StartTextAnimation(0);});
代码详解：
dataText 数组: 这是一个包含所有要显示文本的字符串数组。您可以根据需要修改其中的内容。targetElement: 通过 document.getElementById(‘typewriter-text’) 获取到我们之前在 HTML 中定义的
元素，确保 JavaScript 精确地操作目标元素。
typeWriter(text, i, fnCallback) 函数:这是实现单个字符串打字机效果的核心函数。text.substring(0, i + 1)：截取从字符串开头到当前索引 i 的子字符串，模拟逐字显示。”：在当前文本末尾添加一个用于显示闪烁光标的 元素。aria-hidden=”true” 确保了辅助技术（如屏幕阅读器）会忽略这个纯粹用于视觉效果的元素。setTimeout(function() { typeWriter(text, i + 1, fnCallback); }, 90);：设置一个定时器，在90毫秒后递归调用 typeWriter 函数，以显示下一个字符。这个延迟决定了打字速度。当 i 等于 text.length 时，表示当前字符串已全部显示完毕。此时，如果提供了 fnCallback（一个回调函数），则在2000毫秒（2秒）后执行它，为用户留出阅读当前文本的时间。StartTextAnimation(i) 函数:这个函数负责管理 dataText 数组中字符串的序列播放。if (i >= dataText.length)：检查当前索引 i 是否超出了 dataText 数组的范围。如果超出，说明所有文本都已播放一遍，此时会设置一个20秒的延迟，然后从数组的第一个文本 (StartTextAnimation(0)) 重新开始整个动画序列。if (dataText[i]): 确保当前 dataText[i] 存在，防止因索引越界导致错误（尽管前面的 if 语句已经处理了这种情况，但这是一个良好的防御性编程习惯）。typeWriter(dataText[i], 0, function(){ StartTextAnimation(i + 1); });：调用 typeWriter 函数来显示 dataText 数组中的当前字符串。当 typeWriter 完成其任务后，它会执行提供的回调函数，该回调函数会调用 StartTextAnimation(i + 1) 来启动数组中的下一个字符串的动画。StartTextAnimation(0);: 在 DOMContentLoaded 事件监听器内部，调用 StartTextAnimation(0) 来启动整个打字机动画序列，从 dataText 数组的第一个文本开始。
4. 完整示例代码
将上述 HTML、CSS 和 JavaScript 代码分别保存为 index.html、style.css 和 script.js，并确保它们在同一目录下。
index.html
动态打字机效果
style.css
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #282c34; color: #61dafb; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}#typewriter-text { font-size: 3em; font-family: monospace; white-space: nowrap; overflow: hidden; display: inline-block; border-right: .15em solid orange; /* 初始光标，将被JS中的span替换 */ padding-right: 0.15em; /* 防止文本与光标过于接近 */}#typewriter-text span { border-right: .05em solid; /* 实际闪烁光标样式 */ animation: caret 1s steps(1) infinite;}@keyframes caret { 50% { border-color: transparent; }}
script.js
document.addEventListener('DOMContentLoaded', function(event) { const dataText = [ "VISIBILITÀ.", "NUOVI INGAGGI.", "NUOVI FAN.", "PIÙ VISIBILITÀ!", "SUCCESSO!" ]; const targetElement = document.getElementById('typewriter-text'); function typeWriter(text, i, fnCallback) { if (i < text.length) { targetElement.innerHTML = text.substring(0, i + 1) + ''; setTimeout(function() { typeWriter(text, i + 1, fnCallback); }, 90); } else if (typeof fnCallback === 'function') { setTimeout(fnCallback, 2000); } } function StartTextAnimation(i) { if (i >= dataText.length) { setTimeout(function() { StartTextAnimation(0); }, 20000); return; } if (dataText[i]) { typeWriter(dataText[i], 0, function() { StartTextAnimation(i + 1); }); } } StartTextAnimation(0);});
5. 注意事项与优化
性能: 对于大量文本或复杂动画，innerHTML 的频繁操作可能影响性能。在更复杂的场景中，可以考虑使用 DOM 片段（DocumentFragment）或虚拟 DOM 库。可访问性: aria-hidden=”true” 对光标 的使用是一个很好的实践，因为它确保了屏幕阅读器不会将闪烁的光标读作实际内容。自定义:打字速度: 调整 typeWriter 函数中的 setTimeout 延迟（例如 90 毫秒）可以改变字符显示的速度。文本切换延迟: 调整 typeWriter 函数中回调前的 setTimeout 延迟（例如 2000 毫秒）可以改变每个文本显示完毕后的等待时间。循环延迟: 调整 StartTextAnimation 函数中循环回开头前的 setTimeout 延迟（例如 20000 毫秒）可以改变整个序列重新开始前的等待时间。光标样式: 修改 style.css 中 span 的 border-right 和 caret 动画可以改变光标的外观和闪烁方式。目标元素: 如果需要对多个元素应用打字机效果，可以封装这些函数，使其接受目标元素的 id 或引用作为参数，或者为每个元素创建独立的实例。CSS white-space: nowrap; 和 overflow: hidden;: 这些属性可以防止文本在打字过程中换行或超出容器，保持效果的整洁。
总结
通过结合 HTML 结构、CSS 动画和 JavaScript 逻辑，我们成功创建了一个动态且高度可定制的打字机文本效果。这种效果不仅能增强网页的视觉吸引力，还能有效地引导用户注意力，提升内容的表现力。理解并掌握这些基础技术，将为您的前端开发工作带来更多可能性。
以上就是使用 HTML、CSS 和 JavaScript 创建动态打字机效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525504.html
微信扫一扫 
支付宝扫一扫 
