仅使用 CSS 的打字机效果

本文已整理到 Github，地址 👉 blog。

如果我的内容帮助到了您，欢迎点个 Star 🎉🎉🎉 鼓励鼓励 :) ~~

我希望我的内容可以帮助你。现在我专注于前端领域，但我也将分享我在有限的时间内看到和感受到的东西。

---

我们可以在完全不使用 JavaScript 的情况下，仅使用 CSS 一些小技巧便可以完成打字机效果。

我们可以使用 white-space: nowrap 和 overflow: hidden 来隐藏溢出字符，定义等宽字体以使容器的宽度可预测，然后设置周围容器宽度的动画。闪烁的光标通过设置右边框的动画来实现。

定义两个动画，typing 以设置角色动画和 blink 动画插入符号。

<div class="type-writer">
  <div class="text">All work and no play makes Jack a dull boy!</div>
</div>

CSS 如下：

/* 调整了上述自定义元素的 CSS */
.type-writer .text {
  width: 43ch;
  animation: typing 2s steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 1.5em;
  margin: 1em auto;
}

@keyframes typing {
  from {
    width: 0
  }
}

@keyframes blink {
  50% {
    border-color: transparent
  }
}

👇以下的输入是在没有 JavaScript 的情况下完成的！

打字机效果

你可能需要注意的是，你要根据你内容的长度对宽度进行调整，但整体效果还是不错吧！😃

查看效果

更多资源

• Typewriter effect 添加部分 JS，以根据文本内容的宽度设置动画。
• typeit 一个通用的 JavaScript 打字机效果，仅用于开源或个人项目。
• Typewriter Animation That Handles Anything You Throw at It
• Typewriter Effect