打字机效果

想要实现打字机效果非常简单。如果你使用的是纯英文环境，那么可以基于ch这个单位和等宽字体轻松实现打字机效果，但是这样实现的效果当然是很局限的，我们可以先看代码：

Copy





打字机效果

.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;
}
}



打字机效果



通过简单的step动画，就可以轻松制作打字机效果了，那么问题出现在哪里呢？

ch是字体文件中 “0” 的宽度，如果你处理了字间距那么会失效，同时由于是 “0” 的宽度，所以一般只能处理拉丁字符，对于中文等非拉丁字符由于宽度不同也就无法完美支持了。

要根据打字的长度手动指定step的数量。

修改文字时，要同时修改css文件。

当被翻译插件翻译了文本时，也会失效。

由于纯css方案问题太多，我们当然会想到使用js解决这个问题。

我们可以通过一些别人写好的打字机库来使用精致的打字机效果。

例如：https://github.com/tameemsafi/typewriterjs

这个库提供了丰富的功能，它甚至可以提供切分文本标签和多文本使用不同的动画进行处理。

链式调用也非常直观。

Copy
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('JS plugin for a cool typewriter effect and ')
.typeString('only 5kb Gzipped!')
.pauseFor(1000)
.start();

如果你仍然不满足于这样简单的打字机效果，想要把文本玩出更多的花样，那就需要使用gsap了，这基本上是全世界最强大的动画库。

通过它提供的splitText功能，你可以对文字分割动画进行更精细的控制，而不只限于打字机动画。