动画边框按钮（旋转渐变/虚线行军/呼吸光晕 3 款源码）

效果演示（真实可交互）

悬停暂停旋转 / 按住加速，点击试试 :active 状态

完整代码

HTML 结构：

<button class="ab-btn ab-rotate">旋转渐变边框</button>
<button class="ab-btn ab-march">虚线行军</button>
<button class="ab-btn ab-breathe">呼吸光晕</button>

CSS 核心代码：

/* 1 旋转渐变边框：conic-gradient + @property 驱动角度 */
.ab-rotate { position: relative; background: #171a26; color: #fff;
  padding: 14px 34px; border: none; border-radius: 12px; cursor: pointer; }
.ab-rotate::before {
  content: ''; position: absolute; inset: -3px; border-radius: 14px; z-index: -1;
  background: conic-gradient(from var(--ab-angle, 0deg),
    #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #c084fc, #ff6b6b);
  animation: ab-rotate-spin 3s linear infinite;
}
@property --ab-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes ab-rotate-spin { to { --ab-angle: 360deg; } }
.ab-rotate:hover::before { animation-play-state: paused; }

/* 2 虚线行军：repeating-linear-gradient 平移动画 */
.ab-march {
  background:
    linear-gradient(#171a26, #171a26) padding-box,
    repeating-linear-gradient(45deg, #ff9f43 0 10px, transparent 10px 20px) border-box;
  border: 2px solid transparent;
  animation: ab-march-move 1.2s linear infinite;
}
@keyframes ab-march-move { to { background-position: 0 0, 28px 0; } }

/* 3 呼吸光晕：box-shadow 呼吸动画 */
.ab-breathe {
  border: 2px solid #4d96ff;
  animation: ab-breathe-pulse 2.2s ease-in-out infinite;
}
@keyframes ab-breathe-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(77,150,255,.35); }
  50% { box-shadow: 0 0 22px rgba(77,150,255,.85); }
}

参数说明

兼容性与性能

• 旋转渐变款依赖 @property 注册 CSS 自定义属性，Chrome 85+ / Safari 16.4+ / Firefox 128+ 支持；不支持时边框静态展示为默认角度，不影响布局
• 虚线行军与呼吸光晕为纯传统 CSS，兼容 IE11 之外的所有浏览器
• 动画只驱动 background-position / box-shadow / 自定义属性，无布局抖动；@keyframes 动画可被浏览器 GPU 加速
• 全部零 JS 零依赖，可无障碍嵌入 React/Vue 组件

常见问题

Q: @property 不支持时怎么办？ 旋转渐变款会退化为静态 conic 边框（角度停在初始值 0deg），仍能看到渐变配色；如需兼容老浏览器，可改用 background-position 平移法模拟旋转。

Q: 边框厚度怎么调整？ 改 inset: -3px 的数值即可，注意伪元素圆角 border-radius: 14px 要同步比按钮本体（12px）大约 2px。

Q: 可以只在 hover 时才播放动画吗？ 可以，把 animation 移到 .ab-rotate:hover::before 上即可，平时显示静态渐变边框。

Q: 移动端触屏有效果吗？ 旋转与行军动画在触屏上持续播放，hover 暂停不会触发；呼吸光晕对触屏同样友好。