transition 能监听 background-position 变化吗？
不能。CSS 的 transition 对 background-position 确实支持过渡，但“监听”是误解——它不触发事件、不回调、不感知变化时机，只是在属性值改变时自动补间动画。流光效果依赖的不是监听，而是让 background-position 持续动起来。
流光按钮的核心实现逻辑
本质是用线性渐变做一层“光条”，再通过 background-image + background-size + background-position 配合 animation 推动它横向移动。关键不在 transition，而在 @keyframes。
-
background-image用linear-gradient创建高亮色带（比如 45deg 方向的蓝→紫渐变） -
background-size设为200% 100%，确保光条宽度是容器两倍，有足够位移空间 -
background-position初始设为-100% 0，让光条完全偏左；动画终点设为100% 0，实现完整扫过 - 必须加
background-clip: padding-box，否则圆角下光效会溢出边框
常见翻车点：光条不动、闪烁、只闪一下
这些基本都卡在三个地方：
- 忘了给元素设
background-color: transparent—— 底色盖住了渐变光条 -
animation没加infinite和ease-out类型，导致只跑一遍或加速突兀 - 用了
transition替代animation，比如写transition: background-position 1.5s，结果 hover 时只动一次，松手就回弹，根本做不到持续流光 - 在 flex 容器里按钮没设
min-width: 0，导致background-size计算异常，光条被压缩变形
CSS 示例：可直接粘贴调试的最小可用版本
button {
position: relative;
padding: 12px 24px;
border: none;
border-radius: 8px;
color: white;
font-weight: 600;
background-color: #333;
background-image: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
background-size: 200% 100%;
background-position: -100% 0;
background-clip: padding-box;
animation: shine 2.5s infinite ease-out;
}
@keyframes shine {
to { background-position: 100% 0; }
}
注意：这里没用 transition，shine 动画独立运行；ease-out 让光扫过时末端稍缓，更像真实反光；如果要兼容老浏览器，得加 -webkit- 前缀，但现代项目基本可忽略。
立即学习“前端免费学习笔记（深入）”；
真正难调的其实是光条角度和透明度——太亮压不住底色，太淡看不出效果，这个没有通用值，得盯着自己页面的背景和字体颜色反复试。
