用 linear-gradient + background-position 实现光泽划过效果：定义90deg透明渐变，background-size设200px控制亮条宽度，animation用-100%到100%位移确保平滑入场，直接作用于卡片背景而非叠加层，禁用移动端动画并排查背景覆盖、层叠上下文及渲染优化问题。
用 linear-gradient + background-position 实现划过光泽
电商卡片的“光泽划过”不是真反光，而是视觉欺骗：靠一个窄亮条在灰色/浅色背景上横向扫过，模拟光照掠过表面。最轻量、兼容性最好的方式是用 linear-gradient 定义渐变，再通过 background-position 动画驱动它移动。
关键参数必须匹配：
-
background-image: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent)—— 方向必须是90deg（即to right），亮区居中、两侧透明过渡，避免硬边 -
background-size: 200px 100%—— 控制亮条宽度（约 40px 可视宽度）和重复间距；不设background-size就看不到动画，因为默认铺满即移出 -
animation: shine 1.8s infinite—— 时长 1.5s～2.2s 最自然；太短像闪屏，太长失去“扫”的动感
@keyframes 必须从 -100% 开始位移
如果动画写成 0% { background-position: 0 0; } 100% { background-position: 100% 0; }，亮条会从左边缘“突然出现”，首帧生硬。真正平滑的入场需要它提前在容器外等待。
正确写法：
@keyframes shine {
0% { background-position: -100% 0; }
100% { background-position: 100% 0; }
}
这个 -100% 是百分比值，和 background-size 匹配更安全；若你用了 background-size: 200px 100%，也可写 -200px，但响应式场景下百分比更稳。
卡片上直接加动效，别套 wrapper 或遮罩层
很多团队把光泽做成独立 <span></span> 层盖在卡片上，结果 hover 时定位错位、缩放失真、移动端误触。电商卡片结构通常已含图片+标题+价格，光泽应作为卡片自身的背景动画，而不是叠加层。
实操建议：
- 给卡片容器（如
.product-card）设position: relative，再直接加background动效 - 确保卡片本身没有
overflow: hidden—— 否则阴影或渐变会被裁掉；如有父 wrapper，请检查它的overflow和是否创建了新层叠上下文（比如含transform） - 禁用移动端光泽：用
@media (hover: none) { .product-card { animation: none; } }，比 JS 判断更可靠
光泽失效时优先查这三处
动效写了但没反应？大概率不是 CSS 写错，而是被环境抑制：
-
background-color盖住了渐变 —— 卡片若设了纯色背景，记得改成background: linear-gradient(...) #f8f9fa（渐变在前，底色在后） - 卡片用了
transform: scale(0.99)或filter: blur(0.5px)—— 这些会创建新层叠上下文，把background动画关在里面，导致不可见 - 动画绑在伪类如
:hover上，但卡片是动态渲染（如 React/Vue 列表），且未加will-change: transform或contain: layout paint，滚动时可能被浏览器跳帧优化掉
光泽效果越简单越稳定，别为了“更像金属”硬加多层渐变或 radial-gradient —— 那只会让动画掉帧、调试变难、iOS Safari 直接静音处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
