想要实现打字机效果非常简单。如果你使用的是纯英文环境，那么可以基于ch这个单位和等宽字体轻松实现打字机效果，但是这样实现的效果当然是很局限的，我们可以先看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打字机效果</title>
<style>
.typewriter {
display: inline-block;
font-family: monospace;
white-space: nowrap;
overflow: hidden;
border-right: 2px solid black; /* 模拟光标 */
width: 20ch; /* 文字显示的宽度 */
animation: typing 3.5s steps(5) 1s forwards, blink 0.75s step-end infinite;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 20ch;
}
}
@keyframes blink {
from, to {
border-color: transparent;
}
50% {
border-color: black;
}
}
</style>
</head>
<body>
<div class="typewriter">打字机效果</div>
</body>
</html>
通过简单的step动画，就可以轻松制作打字机效果了，那么问题出现在哪里呢？
-
ch是字体文件中 “0” 的宽度，如果你处理了字间距那么会失效，同时由于是 “0” 的宽度，所以一般只能处理拉丁字符，对于中文等非拉丁字符由于宽度不同也就无法完美支持了。 -
要根据打字的长度手动指定
step的数量。 -
修改文字时，要同时修改
css文件。 -
当被翻译插件翻译了文本时，也会失效。
由于纯css方案问题太多，我们当然会想到使用js解决这个问题。
我们可以通过一些别人写好的打字机库来使用精致的打字机效果。
例如：https://github.com/tameemsafi/typewriterjs
这个库提供了丰富的功能，它甚至可以提供切分文本标签和多文本使用不同的动画进行处理。
链式调用也非常直观。
var app = document.getElementById('app');
var typewriter = new Typewriter(app, {
loop: true,
delay: 75,
});
typewriter
.pauseFor(2500)
.typeString('A simple yet powerful native javascript')
.pauseFor(300)
.deleteChars(10)
.typeString('<strong>JS</strong> plugin for a cool typewriter effect and ')
.typeString('<strong>only <span style="color: #27ae60;">5kb</span> Gzipped!</strong>')
.pauseFor(1000)
.start();
如果你仍然不满足于这样简单的打字机效果，想要把文本玩出更多的花样，那就需要使用gsap了，这基本上是全世界最强大的动画库。
通过它提供的splitText功能，你可以对文字分割动画进行更精细的控制，而不只限于打字机动画。