导航栏悬停光流效果须用::before伪元素实现，因其支持渐变背景与background-position动画，可模拟光线沿边缘滑动；直接改border无法实现连续位移动画。
导航栏悬停时的光流效果，本质是让边框或背景“有方向地亮起来、动起来”，不能靠直接改 border 或简单切颜色实现——因为纯色边框不支持渐变动画，更没法模拟光线沿边缘滑动的感觉。真正可靠的做法是用伪元素（::before）覆盖一层可动画的渐变背景，并通过位移制造流动感。
为什么必须用 ::before 而不是直接改 border
浏览器对 border 的动画支持极弱：它只接受颜色、宽度、样式的离散变化，无法实现“一道光从左上角扫到右下角”的连续位移。而 ::before 是一个独立的、可定位、可设宽高和背景的层，能承载 linear-gradient 并配合 background-position 动画，形成视觉上真实的流光路径。
关键结构与样式要点
要让光流在导航项边缘自然滑过，需满足几个硬性条件：
- 导航项（如
<a></a>或<li>）必须设position: relative，否则伪元素会脱离上下文定位错乱 - 伪元素用
content: ""+position: absolute贴边绘制，通常覆盖整个元素区域或仅四边之一 - 渐变背景至少含两个色标，方向明确，例如：
linear-gradient(45deg, transparent, #fff, transparent) -
background-size设为200% 200%，background-position初始偏移为-100% 0，再用动画平滑移动到100% 0 - 父容器建议加
overflow: hidden，避免光条溢出边框
完整可用的 CSS 示例
以横向导航链接为例：
立即学习“前端免费学习笔记（深入）”；
.nav-link {
position: relative;
display: inline-block;
padding: 12px 24px;
color: #333;
text-decoration: none;
overflow: hidden;
}
.nav-link::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.8), transparent);
background-size: 200% 200%;
background-position: -100% 0;
opacity: 0;
transition: opacity 0.3s;
}
.nav-link:hover::before {
opacity: 1;
animation: shine 2.5s linear infinite;
}
@keyframes shine {
0% { background-position: -100% 0; }
100% { background-position: 100% 0; }
}
这段代码中，光流沿 45° 方向扫过整个链接区域；若只想让光从左侧进入、右侧离开，可把 background-position 动画改为 0% { background-position: -100% 50%; } 100% { background-position: 100% 50%; }，并调整 background-size 为 300% 100% 更贴合细长导航项。
常见问题与调优提示
实际使用中容易卡在几个细节上：
- 动画只闪一下就停？检查是否漏写了
infinite和linear，比如animation: shine 2.5s linear infinite - Chrome 流畅、Safari 卡顿？确保没滥用
transform触发重绘，优先用background-position动画；必要时加will-change: background-position（仅对高频 hover 元素） - 光条太短看不出流动？导航项宽度小（如图标按钮）时，把
background-size放大到300% 300%或更高，让渐变区域更长 - 光效和文字冲突？给伪元素加
z-index: -1，确保它始终在文字底层
