如何使用 CSS 设置可动画的底部边框的宽度？

在网页交互设计中，可动画的底部边框宽度效果是非常实用的视觉反馈手段，常用于导航项、按钮、卡片等元素的交互状态切换。要实现这种效果，核心是利用 CSS 的边框属性结合动画相关属性完成配置。

基础实现：使用 transition 实现过渡动画

最常用的方法是结合 border-bottom-width 属性和 transition 属性实现过渡效果，这种方式适合简单的状态切换场景，比如鼠标悬停时边框宽度变化。

首先需要注意，元素默认需要设置底部边框的基础样式，包括边框样式和颜色，否则即使设置了宽度也不会显示边框。基础样式配置如下：

/* 元素基础样式 */
.nav-item {
    padding: 12px 20px;
    /* 必须设置边框样式和颜色，宽度初始可以为0 */
    border-bottom: 2px solid #409eff;
    /* 初始底部边框宽度 */
    border-bottom-width: 0;
    /* 设置过渡效果，针对 border-bottom-width 属性，持续0.3秒，缓动函数为 ease */
    transition: border-bottom-width 0.3s ease;
    cursor: pointer;
}

/* 悬停时改变底部边框宽度 */
.nav-item:hover {
    border-bottom-width: 2px;
}

这里有几个关键点：一是 border-bottom 简写属性中如果只写宽度不写样式和颜色，边框不会生效，所以要么分开写三个属性，要么简写时包含完整的三部分；二是 transition 要写在元素的基础样式中，而不是 hover 状态里，否则鼠标移出时不会有过渡效果。

进阶实现：使用 animation 实现自定义关键帧动画

如果需要更复杂的动画效果，比如边框宽度先快后慢变化、循环播放等，可以使用 @keyframes 定义关键帧动画，再通过 animation 属性调用。

下面是一个点击元素后底部边框宽度从0到4px再回到2px的示例：

/* 定义关键帧动画 */
@keyframes borderWidthChange {
    0% {
        border-bottom-width: 0;
    }
    50% {
        border-bottom-width: 4px;
    }
    100% {
        border-bottom-width: 2px;
    }
}

/* 元素基础样式 */
.btn {
    padding: 10px 24px;
    border-bottom: 2px solid #f56c6c;
    border-bottom-width: 2px;
    background: #fff;
    cursor: pointer;
}

/* 点击时触发动画 */
.btn:active {
    /* 调用动画，持续0.6秒，缓动函数为 ease-in-out */
    animation: borderWidthChange 0.6s ease-in-out;
}

常见注意事项

• 如果元素初始没有设置 border-bottom-style，即使后续修改 border-bottom-width，边框也不会显示，因为默认样式是 none，宽度再大也无效。
• 使用 transition 时，如果要同时动画多个属性，可以用逗号分隔，比如 transition: border-bottom-width 0.3s ease, color 0.3s ease;。
• 如果动画出现卡顿，可以检查是否同时动画了会影响布局的属性，不过 border-bottom-width 属于重绘属性，一般不会导致明显性能问题，除非在大量元素上同时触发。
• 如果需要兼容旧版本浏览器，可以添加对应前缀，比如 -webkit-transition、-moz-transition 等，不过现在大部分现代浏览器已经不需要这些前缀。

效果优化建议

如果想要边框宽度动画更自然，可以调整缓动函数，比如使用 cubic-bezier(0.4, 0, 0.2, 1) 这种符合物理运动规律的缓动曲线，替代默认的 ease。另外，如果底部边框是和其他效果联动，比如文字颜色变化，可以把相关属性的动画放在同一个 transition 或 animation 中，保持动画节奏一致。

CSS动画底部边框border-bottom-widthtransition修改时间：2026-06-09 14:48:46