请教前端如何实现这种字符打字机的字体动画？

[AsyncX]

https://musicforprogramming.net/latest/

我不是很懂实现这样效果的逻辑，是预读取这一页面上所有的字符，通过 js 依次显示？求指点

[hangbale]

Lea Verou 写的《 css 揭秘》里有专门提到过这个效果

[kop1989smurf]

大概观察了一下，应该是两种效果叠加：
1 、就是楼上说的打字机效果，原理是文字本来在那里，然后靠动画去除遮罩（ or 调整宽度）。
2 、乱码最终变成原文。我观察貌似跳动的代码和 label 的正文没有逻辑联系，所以应该也是一个遮罩，遮罩的逻辑就是引用正文的字体颜色，然后随机变换显示字符串（包含空格），最终移除遮罩。