后端开发教程 - Java、Spring Boot 实战 - msg200.com
纯 CSS 打字动画
通过使用关键帧动画和一些（可以原谅的）神奇数字，我们可以创建纯 CSS 打字动画！
我们使用两个关键帧动画 - 一个用于光标，一个用于字母的“键入”显示。
这种技术的一个主要优点是，由于我们使用了，所以正在“输入”的文本始终可以通过辅助技术以及 SEO 爬虫等工具访问overflow: hidden。因此，它只是暂时在视觉上隐藏，而完整的单词始终在 DOM 中可用。
您可以借用此动画，但如果您更改单词和/或字体，则需要通过更新以下内容进行一些技巧：
// "Type" width
// - controls how much the word container expands when each letter is "typed"
// - will need adjusted depending on word and typeface
$chWidth: .49em;
// Word length
$chCount: 9;
// Typing animation length
$typeDuration: 180ms * $chCount;