怎么在CSS中实现鼠标悬停按钮时边框流动发光动画-css教程-PHP中文网

最稳纯CSS实现是用多层box-shadow叠加动画模拟流动发光，通过颜色渐变与±2px偏移营造游动感，配合animation-play-state控制启停，并为老旧浏览器提供单层box-shadow降级方案。

怎么在css中实现鼠标悬停按钮时边框流动发光动画

用 `box-shadow` 模拟流动发光边框最稳

纯 CSS 实现“流动发光”不是真让光在跑，而是靠多层 box-shadow + animation 叠加出呼吸+偏移的视觉错觉。用 border 本身做动画会卡顿、不发光，且无法实现“流动”感——别碰 border-image 或渐变边框，兼容性和控制力都差。

实操建议：

只对 button 或带 display: inline-block / block 的元素生效，inline 元素要先改显示模式
发光范围靠 box-shadow 的第 3 个参数（模糊半径）控制，建议设为 12px～24px，太大易糊，太小没效果
动画用 keyframes 改变 box-shadow 的颜色和偏移值，不要只变 opacity —— 那只是呼吸，不是流动

`@keyframes` 里必须同时动颜色和偏移

只变透明度或只变颜色，看起来是静态辉光；要“流动”，就得让光晕在 X/Y 方向轻微游走，配合色相微调，人眼才会感知为“游动”。下面这段可直接复制：

@keyframes glowFlow {
  0% {
    box-shadow: 0 0 16px #6366f1, 0 0 32px rgba(99, 102, 241, 0.5);
  }
  25% {
    box-shadow: 2px -2px 16px #8b5cf6, 0 0 32px rgba(139, 92, 246, 0.6);
  }
  50% {
    box-shadow: 0 0 16px #ec4899, 0 0 32px rgba(236, 72, 153, 0.5);
  }
  75% {
    box-shadow: -2px 2px 16px #3b82f6, 0 0 32px rgba(59, 130, 246, 0.6);
  }
  100% {
    box-shadow: 0 0 16px #6366f1, 0 0 32px rgba(99, 102, 241, 0.5);
  }
}

注意点：

每帧的 box-shadow 至少保留两层：一层聚焦发光（小模糊），一层扩散晕染（大模糊+低透明度）
X/Y 偏移控制在 ±2px 内，超过就显得抖，不是流
色相变化选相邻色系（如 indigo → violet → pink → blue），跳色会像故障灯

悬停触发必须用 `:hover` + `transition` 补间

直接写 animation: glowFlow 3s infinite 在 :hover 里会导致鼠标一进一出就重播，断续卡顿。正确做法是用 transition 控制动画启停，并靠 animation-play-state 切换运行状态：

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

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

下载

button {
  position: relative;
  padding: 0.5rem 1rem;
  border: none;
  background: #fff;
  color: #374151;
}

button:hover {
  animation: glowFlow 3s infinite ease-in-out;
  animation-play-state: running;
}

button:not(:hover) {
  animation-play-state: paused;
}

关键细节：