实现顶部三角形左侧动画对齐选中菜单元素左侧

嘿，这个效果我之前做过类似的，用CSS过渡结合绝对定位就能完美实现，甚至可以配合一点点JS让它适配动态宽度的菜单项。下面是具体的实现步骤：

1. HTML结构 #

首先我们需要给菜单容器加一个相对定位的父元素，用来承载那个可拉伸的箭头组件：

<nav class="main-menu">
  <ul class="menu-items">
    <li class="menu-item">首页</li>
    <li class="menu-item">博客</li>
    <li class="menu-item">作品集</li>
    <li class="menu-item">关于我</li>
  </ul>
  <!-- 这就是我们要做动画的箭头元素 -->
  <div class="hover-indicator"></div>
</nav>

2. CSS核心样式 #

这里的关键是把“箭头”拆成两部分：右侧的三角形（固定样式）和左侧的可拉伸白色条（动画部分），通过transition实现平滑过渡：

/* 菜单容器：相对定位，作为箭头的定位基准 */
.main-menu {
  position: relative;
  background-color: #2d3748;
  padding: 1.2rem 2rem;
}

/* 菜单项列表：横向排列 */
.menu-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2.5rem;
  color: #fff;
}

/* 单个菜单项：基础样式，用来标记位置 */
.menu-item {
  padding: 0.6rem 0;
  cursor: pointer;
  position: relative;
}

/* 箭头指示器：初始状态在右上角，只显示三角形 */
.hover-indicator {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 左侧可拉伸条：初始宽度为0，hover时扩展 */
.hover-indicator::before {
  content: "";
  width: 0;
  height: 2px;
  background-color: #fff;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 右侧三角形：固定样式，用border实现 */
.hover-indicator::after {
  content: "";
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #fff;
  margin-left: 0.3rem;
}

/* 核心动画逻辑：hover菜单项时调整箭头位置和拉伸条宽度 */
.menu-item:hover ~ .hover-indicator::before {
  /* 拉伸条宽度 = 容器总宽度 - 箭头初始右侧距离 - 菜单项左侧偏移 */
  width: calc(100% - 3.5rem - var(--item-offset));
}

.menu-item:hover ~ .hover-indicator {
  /* 箭头整体移动到菜单项左侧对齐的位置 */
  right: calc(100% - var(--item-offset) - 1.5rem);
}

3. 适配动态菜单项宽度（可选） #

如果你的菜单项宽度不固定，用JS动态计算每个菜单项的左侧偏移量会更准确：

const menuItems = document.querySelectorAll('.menu-item');
const indicator = document.querySelector('.hover-indicator');

// 计算每个菜单项的左侧偏移，存入CSS变量
menuItems.forEach(item => {
  const offset = item.offsetLeft;
  item.style.setProperty('--item-offset', `${offset}px`);
});

// 窗口大小变化时重新计算（可选）
window.addEventListener('resize', () => {
  menuItems.forEach(item => {
    const offset = item.offsetLeft;
    item.style.setProperty('--item-offset', `${offset}px`);
  });
});

小技巧 #

• 过渡曲线cubic-bezier(0.4, 0, 0.2, 1)是Material Design的标准曲线，动画会更自然，你也可以换成ease或者linear。
• 箭头的大小（border宽度）、颜色、过渡时间都可以根据你的网站风格调整。
• 如果想要点击菜单项后保持箭头状态，可以给.active类加上相同的样式，用JS切换.active类即可。

这样实现后，当你hover任意菜单项时，箭头左侧的白色条会平滑拉伸，同时箭头整体移动，最终箭头的左边缘会精准对齐到hover菜单项的左侧，完全符合你想要的效果！

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