用 background-position 配合线性渐变实现流光边框最简洁高效；核心是伪元素承载渐变背景，通过 background-size 扩展渐变尺寸、background-position 位移驱动动画，配合 infinite 循环与 linear 缓动达成平滑流光效果。
用 background-position 配合线性渐变背景做循环动画，是实现流光边框最简洁、兼容性好且性能高的方式。核心思路是：把一个高亮色条（比如白色或青色）作为渐变中的一小段，通过 background-image 设置成从左到右的线性渐变，再用 background-size 控制它的宽度，最后用 animation 不断移动 background-position，让光条“扫过”按钮四边。
1. 基础结构：用伪元素避免干扰内容
推荐用 ::before 或 ::after 伪元素承载流光背景，这样不会影响按钮文字、内边距或点击区域。主按钮保持干净的 border: none，所有“边框感”由伪元素模拟。
- 给按钮设
position: relative，为伪元素提供定位上下文 - 伪元素设
position: absolute，覆盖整个按钮区域（inset: 0），并z-index: -1确保在文字下方 - 伪元素不设
content以外的默认样式，靠background和animation驱动效果
2. 渐变背景与尺寸控制
关键在 background-image: linear-gradient(...) 的写法。例如：
background-image: linear-gradient(90deg, transparent, #fff, transparent);
这是一条水平方向（90度）的渐变，中间亮、两边透明，像一道光带。再配合：
立即学习“前端免费学习笔记（深入）”；
-
background-size: 200% 200%;—— 把渐变图铺满按钮宽高的2倍，为位移留足空间 -
background-position: -100% 0;—— 初始位置让光带完全在左边外侧，动画开始时刚好“进入”
3. 动画设置：平滑循环的关键参数
用 @keyframes 定义位移过程，例如：
@keyframes shine {
0% { background-position: -100% 0; }
100% { background-position: 200% 0; }
}
这样光带会从左端进、横扫到右端外，形成单向流光。若想更自然，可加多段关键帧，比如让光在中间稍作停留，或改用 ease-in-out 缓动。
- 动画时长建议
2s ~ 3s，太快显得刺眼，太慢失去动感 - 用
infinite实现无限循环，linear保证匀速流动（如需呼吸感可换ease-in-out） - 注意：不要对整个按钮元素直接加
background，否则会覆盖原有背景色 —— 光效必须只作用于伪元素
4. 进阶技巧：模拟“绕边”流光
如果希望光效沿按钮边缘顺时针“跑一圈”，可叠加两个伪元素：
- 一个横向渐变（
90deg）负责上下边 - 另一个纵向渐变（
0deg）负责左右边，background-size调整为200% 200%同样适用 - 两个动画起始位置错开（比如一个 delay 0.5s），就能做出连续绕边效果
或者更轻量的做法：用单个伪元素 + mask 或 clip-path 截出边框路径，再移动渐变 —— 但兼容性略低，适合现代浏览器场景。
基本上就这些。不复杂但容易忽略的是：伪元素层级、背景尺寸与位移范围的匹配、以及动画 timing-function 的选择。调通一次，以后复制粘贴改颜色和速度就能复用。
