CSS打字机效果实现教程

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《CSS实现打字机效果动画教程》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

要实现CSS打字机效果，核心是用overflow: hidden隐藏文字、width动画逐步显示、独立光标元素配合blink动画；2. 常见坑包括steps()步数必须精确匹配字符数，否则跳字或不全，响应式下需white-space: nowrap防换行，光标对齐靠vertical-align或margin微调；3. 若需变速或暂停（如逗号后停顿），纯CSS难以实现，建议拆分元素设不同animation-delay或改用JavaScript控制；4. 多行或动态内容必须用JavaScript逐字添加并管理光标，因CSS无法识别换行逻辑且width动画只适用于单行容器结束。

CSS要做出那种文字一个字一个字蹦出来的打字机效果，其实核心就那么几招：利用overflow: hidden把多余的文字藏起来，然后通过width动画一点点把文字“露”出来，最后再配上一个闪烁的光标。听起来好像有点绕，但实际操作起来你会发现它相当直观，而且纯CSS就能搞定，不需要JavaScript也能做出非常棒的视觉体验。

解决方案

要实现这个效果，我们通常会用到一个包含文字的元素，然后给它设置一个固定宽度，或者让它的宽度随着动画逐渐增加。同时，为了模拟光标，我们会再加一个独立的元素。

HTML结构可以这样：

<div class="typewriter-container">
    <span class="typewriter-text">你好，世界！这是一段模拟打字机效果的文字。</span><span class="cursor">|</span>
</div>

CSS部分是关键。我们用@keyframes来控制文字的显示和光标的闪烁。

.typewriter-container {
    font-family: 'MonoLisa', monospace; /* 随便选个等宽字体，效果会更好 */
    font-size: 24px;
    white-space: nowrap; /* 防止文字换行，确保单行效果 */
    overflow: hidden; /* 隐藏超出宽度的部分 */
    width: 0; /* 初始宽度为0，会被动画覆盖 */
    animation: 
        typing 4s steps(40, end) forwards, /* 40是字符数，需要手动调整，end表示动画结束时停在最后一步 */
        blink-caret .75s step-end infinite; /* step-end让动画在每一步的结束瞬间发生，模拟开关效果 */
    animation-delay: 0.5s; /* 动画开始前的延迟 */
    box-sizing: border-box; /* 确保padding和border不增加总宽度 */
    display: inline-block; /* 确保width动画生效，且能与其他行内元素并排 */
}

.typewriter-text {
    display: inline-block; /* 确保能和光标在同一行 */
    /* 这里的宽度会由父元素的动画控制，所以自身不需要width */
}

.cursor {
    display: inline-block;
    vertical-align: top; /* 确保光标和文字对齐 */
    animation: blink-caret .75s step-end infinite;
    font-weight: bold;
    color: orange;
    margin-left: -0.05em; /* 微调光标位置，让它看起来更贴近文字 */
}

/* 文字打字动画 */
@keyframes typing {
    from { width: 0 }
    to { width: 100% } /* 动画将容器宽度从0扩展到其内容应有的100%宽度 */
}

/* 光标闪烁动画 */
@keyframes blink-caret {
    from, to { opacity: 0; } /* 动画开始和结束时隐藏光标 */
    50% { opacity: 1; } /* 动画中间显示光标 */
}

这里我用了两个来分别承载文字和光标，这样光标的闪烁动画和文字的打字动画可以独立控制，耦合度更低一些。steps()函数是关键，它让动画不是平滑过渡，而是分步进行，模拟每个字符出现的“跳跃”感。forwards让动画结束后保持最终状态。

实现打字机效果时，有哪些常见的“坑”或需要注意的地方？

在实际操作中，你会发现一些小细节可能让你抓狂。一个常见的“坑”是文字的长度和steps()函数里步数的匹配。如果你有40个字符，但steps()设成了20，那文字就会跳着出来，或者显示不全，看起来就像是跳字。所以这个数字通常需要手动去数，或者通过JavaScript动态计算。我个人觉得，手动调整这个值确实是件体力活，特别是在内容经常变动的情况下。

另一个问题是响应式设计。当容器宽度变化时，width: 100%可能会导致文字在动画过程中换行，破坏单行打字机的效果。解决这个通常需要结合white-space: nowrap;来强制不换行，或者在小屏幕上干脆禁用这个效果，或者通过媒体查询调整动画的width目标值。光标的对齐也是个小烦恼。有时候它会比文字高一点或者低一点，这就需要用vertical-align或者微调margin-top来对齐。还有，动画的流畅性在不同浏览器上可能会有细微差异，特别是当文字量很大时，width动画可能会在某些旧浏览器上显得有点卡顿。这时候，考虑用transform: translateX()来模拟，可能性能会更好一些，但实现起来会稍微复杂一点，需要配合一个父容器来裁剪。

如何让打字速度在不同段落或特定字符后暂停，或者速度有所变化？

纯CSS要做到这种精细的控制，比如在逗号后暂停一下，或者某几个字打得特别快，是相当困难的，甚至可以说几乎不可能。@keyframes的steps()是全局性的，它把整个动画时间均匀地分成了若干步。如果你想实现更复杂的暂停或变速，比如打完第一句话停顿2秒，再打第二句话，那通常就需要引入JavaScript来动态控制。

一种CSS的“曲线救国”方案是，把需要不同速度或暂停的文字分成多个独立的元素，然后为每个元素设置不同的animation-delay和animation-duration，并确保它们按顺序出现。但这会大大增加HTML的复杂度，而且维护起来会很麻烦。比如：

<div class="typewriter-container">
    <span class="line1">第一句话。</span><span class="line2">第二句话会晚点出现。</span>
</div>

然后CSS中给line1和line2设置不同的动画。line1动画结束，line2的animation-delay开始计时。但这要求你精确计算每个元素的动画时长和延迟，非常容易出错。

所以，我的建议是，如果只是简单的打字效果，纯CSS很棒。但一旦涉及到复杂的暂停、变速、或者根据内容动态调整，毫不犹豫地转向JavaScript。JavaScript可以让你在每个字符出现后设置延迟，或者根据字符类型（标点符号）调整速度，这样灵活性会高很多。

这个打字机效果能否应用于多行文本或动态加载的内容？

对于多行文本，纯CSS的打字机效果会遇到很大的挑战。我们之前为了实现单行效果，用了white-space: nowrap;和overflow: hidden，这直接限制了文本不能换行。如果你想让文字打完一行后自动换行，然后继续打下一行，纯CSS几乎无法实现。因为CSS的width动画是针对整个元素的，它无法智能地识别“行”的概念，并在行尾触发换行。

对于多行文本的打字机效果，或者内容是动态从后端API获取的，那么JavaScript就成了唯一的选择。JavaScript可以：

1. 逐字或逐句解析文本： 将文本拆分成字符数组或句子数组。
2. 定时器控制： 使用setTimeout或setInterval来逐个显示字符或句子。
3. 动态DOM操作： 将字符或句子添加到DOM中。
4. 光标管理： 动态控制光标的显示和位置。

比如，一个基本的JavaScript思路可能是：

const textElement = document.querySelector('.typewriter-text');
const originalText = textElement.textContent;
textElement.textContent = ''; // 清空原始文本，准备逐字显示
let charIndex = 0;

function typeWriterEffect() {
    if (charIndex < originalText.length) {
        textElement.textContent += originalText.charAt(charIndex);
        charIndex++;
        // 这里可以根据字符类型（如标点符号）调整延迟时间
        const delay = (originalText.charAt(charIndex - 1) === '，' || originalText.charAt(charIndex - 1) === '。') ? 300 : 100;
        setTimeout(typeWriterEffect, delay); 
    }
}
typeWriterEffect();

这只是最基础的，你可以扩展它来处理换行符，或者在特定字符后增加延迟。对于动态内容，你只需要在数据加载完成后，把获取到的文本传递给这个JavaScript函数即可。这样既能保持效果的动态性，又能灵活地处理多行和不确定长度的内容。纯CSS在这一点上，确实显得有点“心有余而力不足”。

文中关于JavaScript,CSS打字机效果,steps(),@keyframes,overflow:hidden的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS打字机效果实现教程》文章吧，也可关注golang学习网公众号了解相关技术文章。