无法用 animate-pulse 实现波浪光影，因其仅控制 opacity；真要波浪效果需自定义 @keyframes + 渐变背景 + transform: translateX 动画，并在 Tailwind 中注册动画、容器设 relative 和 overflow-hidden。
用 animate-pulse 无法实现波浪光影，它只是均匀闪烁
很多人试过直接加 animate-pulse，发现只是背景色明暗交替，没有从左到右的波浪扫光效果。这是因为 animate-pulse 底层是 opacity 动画，和位移、渐变遮罩完全无关。真要波浪光影，得自己定义 @keyframes + background 渐变 + transform: translateX。
手写波浪光影动画的关键三步
核心思路是：用线性渐变做“光条”，用 background-position 或 transform 驱动它横向移动，再叠加透明度控制“穿透感”。实际推荐用 transform，兼容性更好，且不触发重排。
- 定义动画：
@keyframes wave-shine { from { transform: translateX(-100%) } to { transform: translateX(100%) } } - 应用在伪元素上（避免污染结构）：
before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:animate-wave-shine - 必须加
before:animate-infinite before:animate-duration-2000 before:animate-ease-linear，否则只播一次或太卡
Tailwind 中必须手动注册 @keyframes 才能用 animate- 前缀
Tailwind 默认不包含 wave-shine 这类自定义动画，光写 animate-wave-shine 会失效。需要在 tailwind.config.js 的 theme.extend.animation 和 theme.extend.keyframes 里显式注册：
module.exports = {
theme: {
extend: {
animation: {
'wave-shine': 'wave-shine 2s linear infinite',
},
keyframes: {
'wave-shine': {
'0%': { transform: 'translateX(-100%)' },
'100%': { transform: 'translateX(100%)' },
}
}
}
}
}
注意：值里不能写 % 单位（如 translateX(-100%px)），Tailwind 会解析失败；直接写 -100% 即可。
立即学习“前端免费学习笔记（深入）”；
骨架屏容器要设 relative，且子元素用 overflow-hidden
否则光效会溢出边界，看起来像乱闪。典型结构是：
<div class="relative bg-gray-200 rounded-lg overflow-hidden"> <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-wave-shine"></div> <div class="relative z-10 h-6 bg-gray-300 rounded w-3/4"></div> </div>
这里 z-10 确保内容层压在光效上，overflow-hidden 截断超出的动画轨迹——这点常被忽略，导致光效“穿出”圆角或卡片边缘。
