旋转词语切换动画（循环词语轮播，速度方向实时可调）

效果演示（真实可交互）

适合放在 Hero 区强调「动词/名词」：如「今天最想 · 写代码 / 喝咖啡 / 去旅行」。演示区内置切换间隔、方向与暂停控件，改动即时生效。

完整代码

<div class="rw-stage">
  <span class="rw-prefix">今天最想</span>
  <span class="rw-box"><span class="rw-word" id="rwWord">写代码</span></span>
</div>

.rw-box {
  display: inline-block;
  height: 1.25em;
  overflow: hidden;
  vertical-align: bottom;
  min-width: 2.6em;
  text-align: center;
}
.rw-word {
  display: inline-block;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1), opacity .4s ease;
}

const words = ['写代码', '喝咖啡', '去旅行'];
let idx = 0;
setInterval(() => {
  idx = (idx + 1) % words.length;
  // 1. 旧词 translateY(120%) 滑出（上翻方向）
  // 2. 420ms 后换成新词、从 translateY(-120%) 位置复位
  // 3. 强制重排后过渡回 translateY(0)，形成「旋转」动感
}, 2200);

核心思路：词语框固定高度加 overflow: hidden 裁剪，切换时先把词条位移出可视区，替换文字后再从另一侧滑入，配合缓动曲线形成旋转切换感。翻转方向只需把所有位移符号取反；想要左右翻转则把位移轴换成 translateX。

参数说明

兼容性与性能

• 全程只更新单个词条的 transform 与 opacity，两者都走合成器线程，不触发布局重排，帧率稳定
• overflow: hidden 裁剪可触发 GPU 加速；词条数量少、定时器开销可忽略，页面滚动不受影响
• 无需任何第三方库与 polyfill，Chrome / Safari / Firefox / Edge 及 iOS / Android 现代浏览器均可运行
• 中文长词场景下建议为 .rw-box 设置 min-width 与 text-align: center，避免切换瞬间抖动

常见问题

Q: 词条长度不一样，切换时会抖动吗？ 会有一点。给 .rw-box 设置等于最长词宽度的 min-width 即可固定容器宽度，切换过程完全稳定。

Q: 想要左右翻转而不是上下翻转？ 把位移轴从 translateY 换成 translateX，并把容器高度改为宽度限制即可，其余逻辑完全一致。

Q: 怎么让切换在鼠标悬停时暂停？ 在 .rw-box 上监听 mouseenter 调用 clearInterval，mouseleave 重新启动定时器即可，与演示中「暂停/继续」按钮同思路。

Q: 可以商用吗？ 可以。本组件为粤喵自研原创代码，免费商用无需署名，无任何协议限制。