1. 概述
打字机效果是一种常见的网页动态文本展示方式，它模拟了文字逐个字符出现的动画，并通常伴随着一个闪烁的光标，能够有效吸引用户注意力。本教程将指导您如何通过html定义文本容器、css实现光标动画以及javascript控制文本输入逻辑，来构建一个功能完善且可循环的打字机效果。
2. HTML结构
首先，我们需要一个HTML元素作为文本的容器。为了精确控制打字机效果的目标，建议为该元素分配一个唯一的ID。
打字机效果演示
在这个示例中，我们创建了一个空的
标签，并为其指定了id="typewriter-text"。所有动态生成的文本都将显示在这个元素中。3. CSS样式：实现闪烁光标
打字机效果的关键之一是闪烁的光标。我们可以通过CSS的border-right属性和@keyframes动画来实现这一效果。当JavaScript逐字显示文本时，会在当前文本后添加一个标签，这个标签将作为我们的光标。
/* style.css */
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f0f0f0;
color: #333;
}
#typewriter-text {
font-size: 3em;
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏超出容器的文本，配合打字机效果 */
margin: 0;
padding: 0;
}
/* 光标样式 */
#typewriter-text span {
border-right: .08em solid; /* 光标的宽度和颜色 */
animation: caret 1s steps(1) infinite; /* 光标闪烁动画 */
display: inline-block; /* 确保span能正确显示border */
vertical-align: middle; /* 垂直对齐光标 */
margin-left: 2px; /* 光标与文本的间距 */
}
/* 光标闪烁动画 */
@keyframes caret {
50% {
border-color: transparent; /* 动画到一半时，光标透明 */
}
}- border-right: .08em solid;：创建了一个右边框作为光标。.08em定义了光标的宽度。
- animation: caret 1s steps(1) infinite;：应用了一个名为caret的动画。
- 1s：动画持续时间为1秒。
- steps(1)：动画在两个离散的步骤之间切换，即从显示到隐藏，再从隐藏到显示，模拟闪烁效果。
- infinite：动画无限循环。
- @keyframes caret：定义了caret动画，在50%的时间点将border-color设置为transparent，从而实现闪烁。
4. JavaScript逻辑：实现文本输入与循环
JavaScript是实现打字机效果的核心。它负责逐个字符地显示文本、控制显示速度以及在多段文本之间进行切换和循环。
立即学习“Java免费学习笔记（深入）”；
4种CSS3超酷移动手机滑动隐藏侧边栏菜单特效
下载
这是一组共4种效果非常炫酷的CSS3移动手机滑动隐藏侧边栏菜单特效。这四种效果分别是：默认的点击滑动侧边栏菜单效果、带3D transforms的滑动侧边栏效果、文字缩放和淡入淡出效果的滑动侧边栏以及使用translate来实现滑动侧边栏的效果
// script.js
document.addEventListener('DOMContentLoaded', function(event) {
// 定义要进行打字机效果的文本数组
var dataText = [
"VISIBILITÀ.",
"NUOVI INGAGGI.",
"NUOVI FAN.",
"PIÙ VISIBILITÀ!",
"SUCCESSO!"
];
// 获取目标H1元素
var targetElement = document.querySelector("#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秒，可调整
}
}
/**
* 启动文本动画，循环播放dataText数组中的文本
* @param {number} i - dataText数组的当前索引
*/
function StartTextAnimation(i) {
// 检查当前索引的文本是否存在
if (i < dataText.length) {
// 文本存在，开始打字机动画
typeWriter(dataText[i], 0, function() {
// 当前文本动画完成后，启动下一个文本的动画
StartTextAnimation(i + 1);
});
}
// 如果所有文本都已播放完毕，则在延时后从头开始循环
else {
setTimeout(function() {
StartTextAnimation(0); // 循环回到第一个文本
}, 20000); // 所有文本播放完后等待20秒再重新开始，可调整
}
}
// 页面加载完成后，启动文本动画
StartTextAnimation(0);
});JavaScript代码详解：
- DOMContentLoaded事件监听器：确保在DOM完全加载后再执行JavaScript代码，避免因元素未加载而导致的错误。
- dataText数组：存储所有需要进行打字机效果的文本字符串。您可以根据需要修改或扩展此数组。
-
targetElement：通过document.querySelector("#typewriter-text")精确地选择了HTML中带有id="typewriter-text"的元素，而不是选择所有
标签，这解决了原始问题中提到的“只针对特定h1”的需求。
-
typeWriter(text, i, fnCallback)函数：
- 这是一个递归函数，负责逐个字符地显示text字符串。
- text.substring(0, i + 1)：截取从字符串开头到当前索引i的子字符串，模拟字符逐个出现。
- +''：在当前文本末尾添加一个标签，这个标签会通过CSS样式显示为闪烁的光标。aria-hidden="true"是为了提高可访问性，告诉屏幕阅读器忽略这个纯粹用于视觉效果的元素。
- setTimeout(..., 90)：设置一个延时，然后再次调用typeWriter函数来显示下一个字符。90毫秒是每个字符之间的间隔，您可以根据需要调整来改变打字速度。
- 当所有字符都显示完毕（i >= text.length）时，如果提供了fnCallback函数，则在2000毫秒后调用它。这个回调机制用于通知外部函数当前文本已完成显示。
-
StartTextAnimation(i)函数：
- 负责遍历dataText数组，依次播放每个文本的打字机动画。
- if (i
- typeWriter(dataText[i], 0, function(){ StartTextAnimation(i + 1); });：调用typeWriter函数显示当前索引的文本。当typeWriter完成后，其回调函数会触发，进而调用StartTextAnimation(i + 1)来播放数组中的下一个文本。
- else块：当所有文本都已播放完毕时，进入此分支。setTimeout(function() { StartTextAnimation(0); }, 20000);会在20000毫秒（20秒）后重新启动动画，从dataText数组的第一个文本开始循环播放。这个延时也可以根据需求调整。
- StartTextAnimation(0)：在DOMContentLoaded事件监听器内部，首次调用StartTextAnimation(0)来启动整个打字机动画序列。
5. 完整示例代码
为了方便您测试，这里提供一个完整的HTML文件，包含了上述所有HTML、CSS和JavaScript代码。
打字机效果演示
6. 注意事项与优化
- 目标元素选择器：务必使用精确的选择器（如#typewriter-text）来定位您的文本容器，而不是泛泛地选择标签名（如h1），以避免影响页面上其他同类型元素。
-
动画速度调整：
- typeWriter函数中的setTimeout延时（90毫秒）控制着字符输入的快慢。
- typeWriter函数结束后的setTimeout延时（2000毫秒）控制着每段文本显示完毕后到下一段开始前的等待时间。
- StartTextAnimation函数循环结束后setTimeout延时（20000毫秒）控制着所有文本循环一遍后到重新开始前的等待时间。
- 根据您的设计需求，灵活调整这些数值。
- 文本内容管理：dataText数组是您管理打字机文本内容的中心。您可以轻松地添加、修改或删除其中的文本。
- 可访问性：在光标标签上添加aria-hidden="true"属性是一个良好的实践，它告诉屏幕阅读器忽略此元素，因为它纯粹是视觉效果，对理解内容没有帮助。
- CSS white-space 和 overflow：white-space: nowrap;确保文本在打字过程中不会自动换行，overflow: hidden;则在文本超出容器时隐藏，这对于打字机效果的视觉呈现至关重要。
- 性能考虑：对于大量文本或非常频繁的动画，可以考虑使用requestAnimationFrame代替setTimeout来获得更平滑的动画效果，尽管对于打字机效果这种相对简单的动画，setTimeout通常足够。
7. 总结
通过本教程，您应该已经掌握了如何结合HTML、CSS和JavaScript来创建一个动态且具有吸引力的打字机文本效果。这种效果不仅能提升用户体验，还能在网页中突出显示重要信息。您可以根据自己的创意和需求，进一步扩展和定制这些代码，例如添加音效、更复杂的动画或与其他交互事件结合。
