如何在Tailwind CSS中实现卡片边框流光动画？-css教程-PHP中文网

直接用border+animate-pulse不行，因为animate-pulse仅改变透明度，无法实现渐变色沿边框位移的流光效果；流光需用伪元素+linear-gradient配合background-position动画模拟。

如何在tailwind css中实现卡片边框流光动画？

为什么直接用 `border` + `animate-pulse` 不行

因为 animate-pulse 只是透明度闪烁，无法模拟流光扫过边框的「移动高亮」效果。流光本质是渐变色在边框上做位移动画，而 Tailwind 默认不提供可动画化的边框渐变（border-image）支持，也不能直接对 border-color 做关键帧位移。

用 `before` 伪元素 + `linear-gradient` 模拟流光边框

主流可靠方案是脱离原生 border，改用绝对定位的伪元素覆盖在卡片外围，通过 background: linear-gradient 配合 background-position 动画制造“光带扫过”感。关键点：

卡片本身设 position: relative，为伪元素提供定位上下文
::before 元素需覆盖全部边框区域：宽高 = 卡片宽高 + 边框厚度 × 2，top: -2px、left: -2px（假设边框为 2px）
渐变方向必须与流光方向一致（比如从左到右：to right），且至少包含透明 → 亮色 → 透明，否则看不出流动感
动画必须用 background-position 而非 transform，否则会拉伸/模糊渐变

示例关键 CSS（配合 Tailwind 的 @layer 或自定义插件）：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

@keyframes border-glow {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.glow-border::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.6), transparent);
  background-size: 300% 100%;
  animation: border-glow 3s ease-in-out infinite;
  pointer-events: none;
}

如何让流光只出现在 hover 状态

直接加 hover: 前缀无效，因为 Tailwind 不生成 .hover\:glow-border::before 这类嵌套伪类。必须手写 CSS 规则，并把 animation 放在 :hover 下：

不要写 hover:glow-border，那只会作用于元素自身，不会触发伪元素动画
正确写法是：.card:hover::before { animation: border-glow 3s ease-in-out infinite; }
若想 hover 才显示边框（初始无边框），还需在默认状态给 ::before 设 opacity: 0 或 background: none，再在 :hover 中恢复