如何通过css transition实现导航条滑动效果

css transition基础概念

css transition是css3提供的过渡属性，能够让元素在属性值发生变化时产生平滑的动画效果，不需要编写复杂的JavaScript代码。它的核心作用是定义元素从一种样式逐渐变化为另一种样式的过渡过程，常见的可过渡属性包括宽度、高度、背景色、位置偏移等。

transition的完整语法包含四个子属性：

• transition-property：指定需要过渡的css属性，比如width、background-color，取值为all时表示所有可过渡属性都生效
• transition-duration：指定过渡动画的持续时间，单位为s（秒）或ms（毫秒），必须设置否则无动画效果
• transition-timing-function：指定过渡的速度曲线，常见取值有ease（默认，慢快慢）、linear（匀速）、ease-in（慢入快出）等
• transition-delay：指定过渡动画的延迟触发时间，默认值为0

通常我们会使用简写形式，把四个属性合并书写，格式为transition: property duration timing-function delay;，不需要设置的属性可以省略。

导航条滑动效果实现思路

导航条滑动效果的核心逻辑是：当导航条的状态发生变化时（比如鼠标悬停、点击选中），改变导航项的位置、背景或者下划线的位置，同时给变化的属性添加transition过渡，就能产生滑动的视觉效果。

场景一：鼠标悬停导航项下划线滑动

这种效果常见于顶部水平导航条，默认状态下导航项下方没有下划线，鼠标悬停时，下划线从左侧滑入并覆盖导航项宽度，鼠标移出时下划线从右侧滑出。

首先编写基础的导航条HTML结构：

<nav class="nav-bar">
  <ul class="nav-list">
    <li class="nav-item"><a href="#">首页</a></li>
    <li class="nav-item"><a href="#">产品中心</a></li>
    <li class="nav-item"><a href="#">解决方案</a></li>
    <li class="nav-item"><a href="#">关于我们</a></li>
    <li class="nav-item"><a href="#">联系我们</a></li>
  </ul>
</nav>

接下来编写对应的css样式，实现下划线滑动效果：

/* 导航条基础样式 */
.nav-bar {
  background-color: #f5f5f5;
  padding: 0 20px;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 30px;
}

.nav-item {
  position: relative; /* 为下划线定位提供参照 */
  padding: 15px 0;
}

.nav-item a {
  text-decoration: none;
  color: #333;
  font-size: 16px;
  padding: 5px 0;
}

/* 下划线基础样式，默认宽度为0，隐藏 */
.nav-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #1890ff;
  /* 给宽度变化添加过渡效果，持续0.3秒，匀速变化 */
  transition: width 0.3s linear;
}

/* 鼠标悬停时下划线宽度变为100%，触发滑动效果 */
.nav-item:hover::after {
  width: 100%;
}

上面的代码中，我们通过伪元素::after创建下划线，默认宽度为0不显示，鼠标悬停在导航项上时，下划线宽度变为100%，同时width属性有transition过渡，就会产生从左到右的滑动效果。如果想要下划线从中间向两边展开，可以把left设置为50%，hover时left设为0，同时宽度从0变为100%即可。

场景二：点击选中导航项背景滑动

这种效果常见于需要标记当前选中导航项的场景，点击某个导航项时，背景色滑块会滑动到对应导航项的下方，切换选中的导航项时滑块会平滑移动。

首先修改HTML结构，增加一个滑块元素：

<nav class="nav-bar">
  <ul class="nav-list">
    <li class="nav-item active" data-index="0"><a href="#">首页</a></li>
    <li class="nav-item" data-index="1"><a href="#">产品中心</a></li>
    <li class="nav-item" data-index="2"><a href="#">解决方案</a></li>
    <li class="nav-item" data-index="3"><a href="#">关于我们</a></li>
    <li class="nav-item" data-index="4"><a href="#">联系我们</a></li>
  </ul>
  <div class="slider"></div>
</nav>

接下来编写css样式，实现滑块滑动效果：

.nav-bar {
  background-color: #fff;
  padding: 0 20px;
  position: relative; /* 为滑块定位提供参照 */
  border-bottom: 1px solid #eee;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 30px;
}

.nav-item {
  padding: 15px 0;
  cursor: pointer;
}

.nav-item a {
  text-decoration: none;
  color: #666;
  font-size: 16px;
}

.nav-item.active a {
  color: #1890ff;
  font-weight: 500;
}

/* 滑块样式 */
.slider {
  position: absolute;
  bottom: 0;
  left: 20px; /* 初始位置和第一个导航项对齐 */
  width: 48px; /* 和第一个导航项的文字宽度一致 */
  height: 2px;
  background-color: #1890ff;
  /* 给left和width属性添加过渡效果 */
  transition: left 0.3s ease, width 0.3s ease;
}

然后编写少量JavaScript代码，实现点击导航项时滑块滑动：

// 获取所有导航项和滑块元素
const navItems = document.querySelectorAll('.nav-item');
const slider = document.querySelector('.slider');
const navList = document.querySelector('.nav-list');

// 初始化滑块位置，对齐第一个选中的导航项
function initSlider() {
  const activeItem = document.querySelector('.nav-item.active');
  if (activeItem) {
    // 获取导航项相对于导航列表的偏移量
    const itemOffsetLeft = activeItem.offsetLeft;
    // 获取导航项的宽度
    const itemWidth = activeItem.offsetWidth;
    // 设置滑块的位置和宽度
    slider.style.left = itemOffsetLeft + 'px';
    slider.style.width = itemWidth + 'px';
  }
}

// 点击导航项时更新滑块位置
navItems.forEach(item => {
  item.addEventListener('click', function(e) {
    e.preventDefault();
    // 移除所有导航项的active类
    navItems.forEach(nav => nav.classList.remove('active'));
    // 给当前点击的导航项添加active类
    this.classList.add('active');
    // 更新滑块位置
    const itemOffsetLeft = this.offsetLeft;
    const itemWidth = this.offsetWidth;
    slider.style.left = itemOffsetLeft + 'px';
    slider.style.width = itemWidth + 'px';
  });
});

// 页面加载完成后初始化滑块位置
window.addEventListener('load', initSlider);
// 窗口大小变化时重新初始化滑块位置，适配响应式场景
window.addEventListener('resize', initSlider);

这个场景中，滑块的left和width属性都添加了transition过渡，点击导航项时改变这两个属性的值，就能实现滑块平滑滑动到对应位置的效果。注意这里需要计算导航项相对于父容器的偏移量，才能保证滑块位置准确。

注意事项

• 不是所有css属性都支持transition过渡，比如display属性就无法过渡，如果需要实现显示隐藏的滑动效果，建议使用opacity配合visibility或者max-height属性
• transition的持续时间不要设置过长，通常0.2s到0.4s的体验比较好，时间过长会让用户觉得响应迟缓
• 如果导航条是响应式的，需要在窗口大小变化时重新计算滑块的位置，避免出现位置偏移的问题
• 不要给过多的属性添加transition，否则会影响页面性能，只给需要变化的属性添加过渡即可

通过上述两种方法，就可以实现常见的导航条滑动效果，开发者可以根据实际的页面设计需求，调整transition的参数和样式，实现更符合品牌调性的交互效果。

css_transition导航条滑动前端动画网页交互修改时间：2026-06-29 08:54:25