用::before伪元素实现图片扫光动画应作用于外层容器而非<img>标签，需设position:relative和overflow:hidden，推荐left位移动画方案，时长2–3秒、ease-out缓动，并注意移动端hover失效及z-index、pointer-events等渲染问题。
用 ::before 伪元素实现图片扫光动画
直接在图片外层容器加 ::before，比给 <img> 自身加伪元素更可靠——<img> 是替换元素，部分浏览器不支持在其上直接挂伪元素，且无法精确定位光斑起点。
关键点：
-
position: relative必须加在父容器上，否则::before会相对于 body 定位 -
overflow: hidden要设在父容器，防止扫光条溢出边框 - 背景渐变推荐
linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%)，角度控制光向，透明度避免“死白” - 动画只驱动
left或background-position，别动transform——混合位移+旋转会导致轨迹歪斜
@keyframes 扫光动画写法与性能取舍
两种主流写法：一种靠 left 移动伪元素，一种靠 background-position 滚动渐变。前者兼容性更好（IE11 都能跑），后者动画更顺但需注意硬件加速触发。
推荐用 left 方案，稳定且易调试：
立即学习“前端免费学习笔记（深入）”；
@keyframes shine {
from { left: -100%; }
to { left: 100%; }
}
.image-container::before {
animation: shine 2.5s ease-out infinite;
}
注意：
- 时长建议 2–3 秒，太快像闪屏，太慢失去“掠过”感
-
ease-out比linear更自然——光入射快、扫出慢，符合视觉惯性 - 别用
animation-play-state: paused控制启停，hover 触发时直接切 class 更可控
移动端 hover 失效？改用 :focus-within 或 JS 监听
真机上 :hover 在触摸设备基本无效，尤其 iOS Safari。不能指望用户“悬停”来触发扫光。
替代方案：
- 对可聚焦元素（如带
tabindex="0"的容器）用:focus-within，配合键盘导航或点击自动聚焦 - 简单场景直接用 JS：
element.addEventListener('click', () => element.classList.add('shine-active'))，再配 CSS 动画 - 若需自动播放，加
intersectionObserver判断是否进入视口，避免首屏未展示就空跑动画
千万别用 ontouchstart 简单加 class——会和 click 冲突，导致双触发。
扫光效果被裁掉或不显示？检查这三处
最常卡住的地方不是代码逻辑，而是层叠和渲染上下文：
-
z-index：确保伪元素的z-index高于图片，但别设太高（如 9999），容易被其他组件覆盖 -
pointer-events: none必须加在伪元素上，否则它会挡住鼠标事件，导致 hover 状态中断 - 父容器有
isolation: isolate或mix-blend-mode？这两者会创建新层叠上下文，让伪元素失效——删掉或包裹在干净容器里
复杂布局里，伪元素扫光很容易被“吞掉”，先剥离样式做最小验证，再一层层加回，比对着整页调更省时间。
