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

This topic created in 1149 days ago, the information mentioned may be changed or developed.

https://musicforprogramming.net/latest/

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

字符

打字机

请教

字体

2 replies • 2023-04-20 17:49:18 +08:00

1

hangbale

Apr 20, 2023

1

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

2

kop1989smurf

Apr 20, 2023

1

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