用途:rotating-text 用于在标题或文案中让一个词原地轮换,依次显示多组短语,占用空间小,适合需要循环切换关键词的标题场景。
主要能力:资料说明其“dependency-free(无依赖)”,并兼容 prefers-reduced-motion,即在用户偏好减少动态效果时会做相应处理。示例描述为“One word swaps for the next in place”,即一词原地替换为下一词。资料提到每个视图只用一个轮换器,且适合使用短词。
使用方式:复制 CSS 与 JS 后,按资料给出的标记写法使用:<span class="rot" data-words="a|b|c">a</span>。其中 data-words 用竖线分隔待轮换的短语,标签内文本为初始显示内容。
适用场景:标题、标语或简短文案中循环展示少量短语。
限制:资料未提供更完整的安装命令、配置项、兼容范围或性能说明;仅明确需复制 CSS+JS、每视图一个轮换器、使用短词,并在 prefers-reduced-motion 下做处理。具体效果和实现细节以实际代码为准,暂未提供更多信息。