本文已整理到 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
