如何实现CSS文字中间切割的导航菜单hover动画效果？

核心原理 #

这个效果本质是重叠两份完全相同的文字内容，分别裁剪只显示上半部分和下半部分，hover时触发上下两部分往相反方向水平偏移，同时显示中间的分隔线，就形成了从中间切开的视觉效果。

实现步骤 #

• 第一步：HTML结构给导航文字包两层相同内容的元素（可以是同级span，也可以用伪元素减少冗余标签），分别对应上半段文字和下半段文字，再预留一个元素做中间的分隔线。
• 第二步：默认状态下，上下两段文字完全重叠，和普通文字显示效果一致，分隔线缩放为0隐藏。
• 第三步：hover触发时，上半段文字往左偏移指定距离，下半段文字往右偏移相同距离，同时分隔线从中间向两边展开到完整宽度。

代码示例 #

<a href="#" class="nav-item">
  <span class="text-wrap">
    <span class="text-top">首页</span>
    <span class="text-bottom">首页</span>
    <span class="divider"></span>
  </span>
</a>

.nav-item {
  color: #000;
  font-size: 24px;
  text-decoration: none;
}
.text-wrap {
  position: relative;
  display: inline-block;
}
/* 上下两段文字通用样式 */
.text-top, .text-bottom {
  display: block;
  transition: transform 0.3s ease;
}
/* 裁剪出上半段文字 */
.text-top {
  clip-path: inset(0 0 50% 0);
}
/* 裁剪出下半段文字，和上半段重叠 */
.text-bottom {
  position: absolute;
  top: 0;
  left: 0;
  clip-path: inset(50% 0 0 0);
}
/* 中间分隔线默认隐藏 */
.divider {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #000;
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: center;
}
/* hover触发动画 */
.nav-item:hover .text-top {
  transform: translateX(-8px);
}
.nav-item:hover .text-bottom {
  transform: translateX(8px);
}
.nav-item:hover .divider {
  transform: scaleX(1);
}

参数调整说明 #

• 偏移的translateX值可以根据需要调整，值越大切割错位效果越明显
• 过渡时长0.3s可以改成你想要的动画速度
• 分隔线的高度、颜色也可以根据站点风格自定义
• 不想加额外span标签可以用::before和::after伪元素实现两份文字，内容写到content属性即可。

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