如何在没有插入符号的情况下使用 HTML、CSS 和 JS 在用户悬停时制作书写动画（文本更改）

Question

I'm trying to make something with an effect similar to this (where the text is getting typed on it's own), without the caret, and set that to happen when the user hover's over it. Any help is appreciated, Thanks.

Answer 1

This works for one line. The only problem is that it doesn't wrap text.

 .typewriter { width: fit-content; } .typewriter div { overflow: hidden; white-space: nowrap; margin: 0 auto; letter-spacing: .05em; animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; } @keyframes typing { from { width: 0 } to { width: 100% } }

 <div class = 'typewriter'> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>