前言
Chat GPT和各种AI都火了，但是对于他们对于文字生成过程中的效果也让人好奇是怎么实现的，其实，基本都是流式生成的，但是前端的效果看到渡一大佬视频给的一种实现方式，感觉还挺简单的，刚开始是想通过js去实现，今天来试着实现一下。
布局
主要方式是通过两个p标签进行重叠布局，第一个p标签是真正用来显示的，第二个p标签是用来实现擦除效果的
相信大家看到这段代码都有一个疑惑，第二个p标签里面会有一个span标签，直接给一个没有用span和有span的图进行对比，相信大家一看就知道了，主要原理就是
- p标签
- p标签包含span标签实现
完整代码
注意一点是。动态效果是通过 keyframes 去动态去改变css变量去实现的，所以实现过程中，需要定义一个css变量去动态计算文本擦除的背景渐变
