用伪元素+clip-path或mask配合位移动画才能实现真流动霓虹光带，因border和box-shadow仅能呼吸闪烁而无法定向位移；需单元素绕边平移、分阶段控制clip-path形状，并注意iOS兼容性与圆角匹配。
直接用 box-shadow 动画做“流动线条”是错的路径——它只能发散，不能位移。真正在按钮边缘跑动的霓虹光带，得靠伪元素 + clip-path 或 mask 配合位移动画，再叠多层阴影模拟辉光。
为什么 border-color 动画和纯 box-shadow 无法实现线条流动
常见错误是给 border 加 animation: pulse 2s infinite 或对 box-shadow 做 0 0 10px #0ff → 0 0 30px #0ff 过渡。这两种方式都只改变“亮度/大小”，不产生“方向性位移”，视觉上就是呼吸或闪烁，不是光在管子里游走。
真正流动感来自：一个细长矩形（比如 2px × 100%）沿按钮四边按顺序平移，且每段只在进入/离开时有渐隐渐显。浏览器渲染时，它必须是单个可定位元素，不能靠四段独立动画硬拼——否则在拐角处会断开或重叠。
- 用
border本身做不到连续路径：CSS border 是封闭线框，无法单独控制某一段的显示/运动 -
box-shadow没有位移能力：所有值都是偏移+模糊，不能“从左顶点滑到右顶点” - 移动端触摸时，
:active会重置伪元素动画计时器，导致光带突然跳回起点——必须用animation-play-state: paused/running手动接管
用 ::before + clip-path 实现顺时针光带流动
核心思路：一个绝对定位的伪元素覆盖整个按钮区域，用 clip-path: polygon() 切出一条窄带，并通过 transform: translateX() / translateY() 让它绕边移动。关键在于四段位移用同一动画、分阶段控制 clip-path 形状与位置。
立即学习“前端免费学习笔记（深入）”；
示例关键帧逻辑（以宽高均为 200px 的按钮为例）：
button {
position: relative;
}
button::before {
content: "";
position: absolute;
top: -2px; left: -2px; right: -2px; bottom: -2px;
background: linear-gradient(90deg, #00cfff, #00ff9d);
z-index: 1;
animation: neon-sweep 4s linear infinite;
clip-path: polygon(0 0, 100% 0, 100% 2px, 0 2px); /* 初始：顶部横条 */
}
@keyframes neon-sweep {
0% {
clip-path: polygon(0 0, 100% 0, 100% 2px, 0 2px);
transform: translateX(0);
}
25% {
clip-path: polygon(100% 0, 100% 100%, 98% 100%, 98% 0);
transform: translateY(0);
}
50% {
clip-path: polygon(100% 100%, 0 100%, 0 98%, 100% 98%);
transform: translateX(0);
}
75% {
clip-path: polygon(0 100%, 0 0, 2px 0, 2px 100%);
transform: translateY(0);
}
100% {
clip-path: polygon(0 0, 100% 0, 100% 2px, 0 2px);
transform: translateX(0);
}
}- 每段
clip-path都保持 2px 高/宽，确保光带粗细一致 -
transform不用于位移主体，仅微调对齐（如避免 subpixel 渲染抖动） - 动画时长建议 ≥3.5s：太短则人眼跟不上路径，像频闪；太长则失去“流动”节奏
兼容性与性能陷阱：iOS Safari 和高刷新率屏
iOS Safari 对 clip-path 的硬件加速支持弱，尤其配合 linear-gradient 背景时容易掉帧。Chrome 高刷屏（120Hz+）下，4s 动画可能被插值得过于顺滑，反而削弱“光管电离”的顿挫感。
- 降级方案：用
mask替代clip-path（需加-webkit-mask前缀），但 Android 4.4–6.0 不支持 - 强制启用 GPU：给伪元素加
transform: translateZ(0)，比will-change更稳妥 - 防闪烁关键：禁用所有
:hover中对伪元素的animation修改，改用 JS 切换 class 并预设 paused 状态 - 深色模式适配：光带颜色别用固定
#00f，改用color-mix(in srgb, var(--neon-main), black 30%)（支持浏览器中）或媒体查询覆盖
最易被忽略的是光带与按钮圆角的匹配——如果按钮 border-radius: 12px，但伪元素的 clip-path 仍是直角矩形，拐角处就会露出生硬切口。必须用 path() 语法写圆角路径，或接受在圆角处用 overflow: hidden 截断，后者更可控。
