文字分割按钮（悬停上下错位分裂动画源码）

效果演示（真实可交互）

悬停文字上下分离再合拢，适合导航与 CTA 按钮

完整代码

HTML 结构（双层文本 + data-text 备用）：

<a class="st-btn" href="#">
  <span class="st-top" data-text="粤喵组件库">粤喵组件库</span>
  <span class="st-bottom" data-text="粤喵组件库">粤喵组件库</span>
</a>

CSS 核心代码：

.st-btn { position: relative; display: inline-block;
  padding: 13px 36px; overflow: hidden;
  background: linear-gradient(120deg, #4d96ff, #7c5cff); color: #fff; }

/* 上半层：裁掉下半，悬停时上移 */
.st-top {
  display: block; clip-path: inset(0 0 50% 0);
  transition: transform .38s cubic-bezier(.22,1,.36,1);
}
/* 下半层：裁掉上半，负 margin 对齐，悬停时下移 */
.st-bottom {
  display: block; clip-path: inset(50% 0 0 0);
  margin-top: -1.2em;
  transition: transform .38s cubic-bezier(.22,1,.36,1);
}
.st-btn:hover .st-top { transform: translateY(-38%); }
.st-btn:hover .st-bottom { transform: translateY(38%); }

参数说明

兼容性与性能

• 只用 clip-path + transform，兼容 Chrome / Safari / Firefox / Edge 现代版本；clip-path 的 inset 语法 IE 不支持，旧项目可用 overflow + 绝对定位裁剪替代
• 动画仅驱动 transform，走合成器通道，60fps 无压力
• data-text 属性可在 JS 场景下配合伪元素 content: attr(data-text) 重绘文字，本组件为双 span 方案，无需 JS
• 纯 CSS 零依赖，字重、字号、颜色均可直接继承按钮主题

常见问题

Q: 为什么需要两层 span？ 一层文字无法做到「上下各显示一半且独立移动」，双层叠加后分别裁剪并反向位移，视觉上就产生了文字被撕裂成两半的效果。

Q: margin-top: -1.2em 是什么原理？ 两层文本在正常流中会上下排列，用负 margin 把下半层拉回与上半层重叠；数值随字号与行高变化，若换字体需微调。

Q: 能改成左右分裂吗？ 可以，把 clip-path 改成 inset(0 50% 0 0) 和 inset(0 0 0 50%)，位移改为 translateX(±38%) 即可。

Q: 触屏设备上有效果吗？ hover 在触屏上表现为首次点击触发，进入错位态后再次点击才跳转；移动端建议把分裂动画放到 :active 或点击态，避免干扰点击跳转。