通过transition和width属性实现导航栏下划线动画，1. 用HTML构建导航结构，每个链接内含span作为下划线；2. CSS中设置underline初始width为0，添加transition过渡效果；3. hover时width设为100%，触发动画展开；4. 可选居中展开通过left:50%和translateX(-50%)实现，优化视觉效果。
在CSS初级项目中实现导航栏下划线动画，可以通过 transition 和 width 属性来控制鼠标悬停时的下划线展开效果。这种动画简洁美观，适合用在网页顶部导航菜单中，提升用户体验。
先构建一个简单的水平导航菜单，每个菜单项包含文字和用于下划线的容器（可以是 span 或伪元素）：
<nav class="navbar"> <a href="#" class="nav-link">首页<span class="underline"></span></a> <a href="#" class="nav-link">关于<span class="underline"></span></a> <a href="#" class="nav-link">服务<span class="underline"></span></a> <a href="#" class="nav-link">联系<span class="underline"></span></a> </nav>
使用CSS设置初始状态，让下划线默认宽度为0，并添加 transition 实现平滑动画：
.navbar {
display: flex;
gap: 40px;
padding: 20px;
justify-content: center;
}
<p>.nav-link {
text-decoration: none;
color: #333;
position: relative;
font-size: 16px;
}</p><p>.underline {
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background-color: #007acc;
transition: width 0.3s ease;
}</p>当鼠标悬停在链接上时，将下划线的 width 设置为100%，触发 transition 动画：
立即学习“前端免费学习笔记（深入）”；
.nav-link:hover .underline {
width: 100%;
}
这样当下划线从 0 扩展到 100% 时，就会有平滑的横向展开动画。
如果希望下划线从中部向两边展开，可以调整伪元素的定位方式：
.underline {
left: 50%;
transform: translateX(-50%);
/* 其他样式不变 */
}
<p>.nav-link:hover .underline {
width: 100%;
}</p>这样下划线会从中心向左右同时扩展，视觉效果更柔和。
基本上就这些。通过控制 width 配合 transition，就能轻松实现导航栏下划线动画。不复杂但容易忽略细节，比如定位方式和过渡时间的选择。多尝试不同的 easing 函数如 ease-in-out，可以让动画更有质感。
以上就是如何在CSS初级项目中实现导航栏下划线动画_transition和width控制的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
813
收藏
