关于<span>标签中data-rotate与data-period属性作用的技术咨询

你在做的这个打字动画里，data-rotate和data-period都是自定义data属性，用来给控制动画的JavaScript代码传递配置参数——HTML本身不识别这两个属性，它们完全是服务于你的打字动画逻辑：

• data-period
  属性值1000是毫秒数，用来控制动画的切换间隔。简单说就是：当一段文本（比如"Web Developer"）完成打字、删除的完整流程后，会等待1000毫秒（1秒），再开始下一段文本的打字动画。数值越大，每轮动画之间的停顿时间越长。

• data-rotate
  属性值是一个JSON数组字符串，里面列出了打字动画需要循环展示的所有文本内容。JS会解析这个数组，依次把里面的"Web Developer"、"Web Designer"、"UI/UX Designer"作为目标文本，循环执行打字和删除的动画。

你提供的对应HTML代码：

<span
  className="font-mono text-3xl sm:text-4xl text-gray-100"
  data-period="1000"
  data-rotate='[ "Web Developer", "Web Designer", "UI/UX Designer" ]'
>
  <span className="flex-wrap">{text}</span>
  <span className="box-border inline-block w-1 h-12 -mb-2 bg-gray-500 opacity-75 animate-cursor"></span>
</span>

内容的提问来源于stack exchange，提问作者Chee Feng