想要實現打字機效果非常簡單。如果你使用的是純英文環境，那麼可以基於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功能，你可以對文字分割動畫進行更精細的控制，而不只限於打字機動畫。