伪类选择器通过:hover触发发光边线动画，本质是用::before/::after伪元素配合渐变背景与transform位移模拟光带游走；需设content:""、父容器relative定位，并统一clip-path值确保贴合边界。
伪类选择器怎么触发发光边线动画
发光边线游走的本质，是让一个 ::before 或 ::after 伪元素沿按钮轮廓做路径动画。但伪元素默认不支持 clip-path 动画或 SVG 路径描边，所以得用「渐变遮罩 + 位移」组合：用 background 做环形/斜向发光带，再靠 transform: translate() 移动它，视觉上就像光在边界游走。
关键点在于必须用 :hover 触发，否则动画不会启动；:focus 或 :active 可作为备选触发条件，但移动端点击无 :hover，得额外加 touchstart JS 监听补全。
-
::before必须设content: ""，否则不渲染 - 父容器（按钮）需设
position: relative，伪元素才可绝对定位贴边 - 动画不能直接写在
:hover上——要写在伪元素的 class 或单独@keyframes中，否则 Safari 会丢帧
不规则边界的 clip-path 怎么和动画配合
圆角、三角、波浪、切角按钮都靠 clip-path 定义形状，但它的值本身不能直接动画（只有部分浏览器支持 clip-path 的 inset() 或 circle() 动画，polygon() 和 path() 全都不行）。所以得绕开：把发光效果做在伪元素上，再用相同的 clip-path 值裁剪它，让它“严丝合缝”贴着按钮边缘跑。
例如按钮用了 clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 80% 100%, 0% 100%)，那 ::before 也得套一模一样的 clip-path，否则光带会漏出或缩进。
立即学习“前端免费学习笔记（深入）”；
- 手写
polygon()坐标时，单位统一用%，避免 px 导致响应式错位 - Chrome 115+ 支持
path()语法，但 Firefox 和 Safari 还不支持，生产环境慎用 - 如果按钮宽高动态变化，
clip-path用inset()更稳妥，比如clip-path: inset(2px round 8px)
background 渐变发光带的写法和常见翻车点
发光游走效果不是靠多层阴影堆出来的——那是卡顿元凶。真正轻量的做法是用 linear-gradient 或 conic-gradient 生成一条窄亮带，再用 background-position 驱动它滚动。比如 background: linear-gradient(45deg, transparent, #fff, transparent) 配合 background-size: 200% 200%，就能做出斜向扫光。
但这里极易出错：渐变方向必须和 clip-path 边界走向匹配，否则光带会“断连”；而且 background-clip: text 对伪元素无效，别试。
- 发光色推荐用
hsl(210 80% 65%)这类带蓝紫调的颜色，比纯白更显“游走感” -
background-size至少设为300% 300%，否则动画循环太急，像抖动 - 别给伪元素加
box-shadow，它会破坏clip-path边界精度，尤其在 Retina 屏上明显露白边
动画性能和兼容性怎么稳住
这个效果最容易在低端安卓机或旧版 Edge 上掉帧，根本原因是 transform 和 background-position 都触发重绘（repaint），而不是仅重排（reflow）。解决方案只有一个：强制 GPU 加速，但只对 transform 有效，对 background-position 无效——所以得把位移逻辑全挪到 transform 上。
也就是说，发光带本身不动，靠移动整个伪元素的位置来模拟“游走”，同时用 will-change: transform 提前告知浏览器。iOS Safari 对 will-change 敏感，加了反而卡，得用 JS 检测 UA 后按需注入。
- 动画时长建议设
3s～5s，太快看不出游走，太慢像卡死 - Firefox 不支持
conic-gradient动画，用linear-gradient+ 多层旋转更保险 - 如果按钮有文字，确保伪元素
z-index低于文字，否则发光会盖住字
最麻烦的其实是“不规则”的定义——你写的 clip-path 越复杂，越难让光带看起来是“沿着边走”，而不是“在边附近乱晃”。这时候得手动微调 background-position 的起始偏移和动画关键帧，没有通用公式，只能肉眼调。
