用多重box-shadow无法实现流光，真正可行的是::before伪元素+线性渐变背景+translateX()位移动画；需hover触发、避免Safari兼容问题，并通过inset定位和clip-path确保适配不同尺寸卡片。
用 box-shadow 模拟流光，别碰 border 动画
直接给 border 加 animation 无法实现真正的“流动感”——CSS 不支持对 border-color 做渐变位移动画。实际可行的路只有一条：用多重 box-shadow 配合 transform: translateX() 或 rotate() 制造视觉偏移，再叠加线性渐变色，让高亮区域看起来在“跑”。
关键点在于：流光不是边框本身在变色，而是叠加一层“会动的发光层”。示例中常用三层阴影模拟光斑扫过效果：
.card {
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent,
rgba(255,255,255,0.8),
transparent
);
animation: shine 3s infinite;
}
@keyframes shine {
0% { transform: rotate(0deg) translateX(-100%); }
100% { transform: rotate(0deg) translateX(100%); }
}
鼠标进入时才触发流光，用 :hover 控制 animation-play-state
全局自动播放流光既耗性能又干扰体验。正确做法是默认暂停动画，:hover 时恢复播放。注意不能只靠 display 或 opacity 切换——那会打断动画状态。
-
animation-play-state: paused放在基础样式里 .card:hover::before { animation-play-state: running; }- 避免在
::before上写transition，否则 hover 瞬间会有延迟或跳帧
兼容性陷阱：Safari 对 transform + background-gradient 动画渲染不稳定
Safari（尤其 iOS 15–16）常出现流光卡顿、闪烁甚至不显示。根本原因是其对 transform 和渐变背景同时动画的合成优化差。绕过方案有二：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 改用
background-position动画（需配合background-size足够大）：background: linear-gradient(45deg, ...); background-size: 200% 200%; animation: bgShift 3s infinite; - 降级为单方向平移（如只用
translateX），去掉rotate—— 多数场景下视觉差异不大，但 Safari 表现稳定得多
卡片尺寸变化时流光错位？重置 transform-origin 和定位基准
如果卡片用 flex 或 grid 布局导致宽高不固定，::before 的 top/left/width/height 百分比可能失效，流光就“脱框”了。此时必须显式绑定参考系：
- 确保
.card有position: relative（已写，但容易漏） -
::before的transform-origin: 0 0，避免旋转中心漂移 - 更稳妥的做法：把流光层改成
inset(0)定位 +clip-path: inset(0)限幅，防止溢出
真正难的不是写出第一版流光，而是让不同尺寸、不同父容器下的卡片都保持光效贴边且不抖动——这得靠反复调 background-size、translate 距离和 animation-duration 的组合。没有万能参数，只有现场试。
