本教程详细介绍了如何利用 HTML 结构、CSS 动画和 JavaScript 逻辑，在网页上实现一个引人注目的打字机文本效果。文章将逐步指导读者创建动态逐字显示文本、模拟光标闪烁以及在多个文本之间循环切换的完整解决方案，并提供清晰的代码示例和关键实现细节，帮助开发者轻松为网站增添互动性和视觉吸引力。
1. 打字机效果概述
打字机效果是一种常见的网页动态文本展示方式，它通过模拟打字机逐字输出文本的过程，为用户带来独特的视觉体验。这种效果常用于网站标题、口号或关键信息展示，能够有效吸引用户的注意力。本教程将引导您使用纯前端技术（html、css 和 javascript）构建一个功能完善、可定制的打字机效果。
2. HTML 结构：定义文本容器
首先，我们需要在 HTML 中定义一个元素来承载动态生成的文本。为了精确控制和避免影响页面上其他同类型元素，强烈建议为该元素指定一个唯一的 id。
在这个示例中，我们使用了一个
标签，并为其指定了 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 是实现打字机效果的核心。它负责逐字输出文本、控制速度、切换不同的文本内容，并确保动画的流畅性。
立即学习“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) + ''; // 设置延时，然后递归调用自身打印下一个字符 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 代码整合到您的项目中，即可实现打字机效果。
打字机效果演示 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; /* 在动画中点时隐藏光标 */ } } 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) + ''; // 设置延时，然后递归调用自身打印下一个字符 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); });
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 创建动态打字机效果教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525518.html
微信扫一扫 
支付宝扫一扫 
