用css自己实现,实现chatgpt的弹字动画

每日鸡汤:每个你想要学习的瞬间都是未来的自己向你求救

这篇文章提到了一个可以使用typed.js实现一个字一个字的打印出来的弹字效果,但是使用这个插件有两个问题

  1. 需要提前知道需要打印的内容,拼接成html
  2. html格式比较复杂的时候,闪烁的光标和内容不好排版,总之会出现各种格式问题,就很麻烦
  3. 打印结束oncomplete触发是是异步的,不能保证打印的顺序【虽然可以用async await,但是太麻烦了,何必呢】

所以其实要真的实现chat-gpt类似的弹字效果,不用那么麻烦,不用使用npm插件,自己使用css就可以改实现,光标就用一个span标签加上css样式和闪烁的动画就可以,然后每当新收到一个内容就追加到光标前面的html内容就行了。

参考

你可能感兴趣的:(css,前端,javascript)