说在前面

网页中文本逐字打印这个效果大家应该都不陌生吧，很多个人博客首页都喜欢用这个效果来做一个欢迎语或自我介绍，今天我们一起来看看这个效果是怎么实现的

在线预览

码上掘金

CodePen

codepen.io/yongtaozhen…

代码实现

html

<div id="text"></div>

准备一个div作为文本容器即可，当然，不准备直接在js中创建也可以😁

css

文本容器居中显示

这个看个人喜欢，我这里直接flex布局居中。

body {
  margin: 0;
  overflow: hidden;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
#text {
  margin: auto;
  color: white;
  font-size: clamp(1.2rem, 3vw, 1.8rem); /* 响应式字体 */
  font-family: "楷体", cursive;
  text-align: center;
  text-shadow: 0 0 10px rgba(255, 64, 129, 0.6);
}

• clamp函数：clamp() 函数接收三个用逗号分隔的[表达式]作为参数，按最小值、首选值、最大值的顺序排列。

闪烁光标

使用伪元素在文本最后插入一个光标，动画循环修改光标透明度即可

#text::after {
  content: "|";
  margin-left: 2px;
  animation: blink 0.7s infinite;
}
.cursor {
  margin-left: 2px;
  animation: blink 0.7s infinite;
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

JavaScrip

const text = ["hello😳你好呀", "欢迎来到我的空间✨"];
let lineIndex = 0;
let charIndex = 0;
const textDiv = document.getElementById("text");
let cursor;
const typeSpeed = 150; // 打字速度（毫秒）

function typeText() {
  if (lineIndex < text.length) {
    if (charIndex < text[lineIndex].length) {
      textDiv.innerHTML += text[lineIndex][charIndex++];
      setTimeout(typeText, typeSpeed);
    } else {
      if (lineIndex === text.length - 1) {
        return;
      }
      setTimeout(() => {
        textDiv.innerHTML += "<br>";
        lineIndex++;
        charIndex = 0;
        setTimeout(typeText, typeSpeed);
      }, typeSpeed / 2);
    }
  }
}
setTimeout(typeText, typeSpeed);

• 数组存储文本：支持多行内容，通过 lineIndex 和 charIndex 实现行与字符的双重遍历。
• 打印速度：typeSpeed 控制每个字符显示的延迟，数值越小打字越快。
• 递归调用：通过 setTimeout 递归调用 typeText，实现逐个字符的延迟显示。
• 换行逻辑：非最后一行结束时，添加
  换行，并通过 lineIndex++ 切换到下一行，同时重置 charIndex 为 0。
• 结束处理：所有内容显示完毕后，自动停止操作，保留最后一个光标（如需隐藏，可额外进行处理）。

源码

gitee

gitee.com/zheng_yongt…

github

github.com/yongtaozhen…

---

• 🌟 觉得有帮助的可以点个 star~
• 🖊 有什么问题或错误可以指出，欢迎 pr~
• 📬 有什么想要实现的功能或想法可以联系我~

---

公众号

关注公众号『 前端也能这么有趣 』，获取更多有趣内容。

发送 加群 还可以加入群聊，一起来学习（摸鱼）吧~

说在后面

🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。