卡片边框动画 3 种特效（描边生长/霓虹旋转/虚线流动 CSS 源码）

效果演示（真实可交互）

把鼠标移到卡片上体验三种边框动画：描边生长是悬停触发，霓虹旋转与虚线流动是常驻动画。所有效果都只使用 CSS，复制即可使用。

完整代码

HTML 结构：每张卡片是一个 .cb-card，内部 .cb-inner 承载内容，边框全部由伪元素和背景实现，无需额外标签：

<div class="cb-card cb-draw">
  <div class="cb-inner">
    <span class="cb-emoji">🖼️</span>
    <strong>描边生长</strong>
    <p>悬停后四条边框从角上依次画出</p>
  </div>
</div>
<!-- 换用 cb-neon / cb-dash 切换玩法 -->

核心 CSS：

/* ① 描边生长：两个伪元素分别从左上、右下"画出"边框 */
.cb-draw::before,
.cb-draw::after {
  content: '';
  position: absolute;
  width: 0; height: 0;
  transition: width .35s ease, height .35s ease;
}
.cb-draw::before {
  top: 14px; left: 14px;
  border-top: 2px solid #6c8cff;
  border-left: 2px solid #6c8cff;
}
.cb-draw::after {
  bottom: 14px; right: 14px;
  border-bottom: 2px solid #6c8cff;
  border-right: 2px solid #6c8cff;
}
.cb-draw:hover::before { width: calc(100% - 28px); height: calc(100% - 28px); }
.cb-draw:hover::after  { width: calc(100% - 28px); height: calc(100% - 28px); }

/* ② 霓虹渐变旋转边框：inset: -100% 让渐变足够大，遮罩挖出 2px 边框 */
.cb-neon::before {
  content: '';
  position: absolute;
  inset: -100%;
  background: conic-gradient(from 0deg, #ff6ec4, #7873f5, #4ade80, #ffd166, #ff6ec4);
  animation: cb-spin 4s linear infinite;
}
.cb-neon::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 14px;
  background: #14171e;
}
@keyframes cb-spin { to { transform: rotate(360deg); } }

/* ③ 虚线流动：border-box 渐变描边 + 移动背景位置 */
.cb-dash {
  border: 2px dashed transparent;
  background:
    linear-gradient(#14171e, #14171e) padding-box,
    linear-gradient(90deg, #f6d365, #fda085, #f6d365) border-box;
  background-size: 200% 100%;
  animation: cb-dash-move 3s linear infinite;
}
@keyframes cb-dash-move { to { background-position: -200% 0; } }

参数说明

兼容性与性能

• 纯 CSS 实现，现代浏览器（Chrome 88+ / Safari 15+ / Firefox 84+ / Edge 88+）全部支持
• conic-gradient 需要 Chrome 69+，老浏览器可用 linear-gradient 平替
• 霓虹边框的 inset: -100% 渐变层较大，但只合成不重绘，性能开销可接受
• 动画使用 transform 与 background-position，避免触发布局重排，滚动时依然流畅

常见问题

Q: 霓虹边框里层的挖空是怎么实现的？ 用 ::after 覆盖一张与卡片底色相同的圆角矩形，inset: 2px 让它比渐变层小 2px，边缘露出的渐变就成了”边框”，通过 inset 数值控制粗细。

Q: 想改成只有悬停时才出现渐变边框？ 把 .cb-neon::before 的 animation 移到 .cb-neon:hover::before，再把伪元素的默认 opacity: 0 改成 hover 时 opacity: 1 即可。

Q: 卡片内容会被伪元素遮挡吗？ 不会，.cb-inner 设置了 z-index: 1，内容始终在边框层之上；霓虹玩法里 ::after 也要保持 position: absolute 的层叠顺序在内容之下。

Q: 虚线流动效果在 Safari 上正常吗？ 正常，border-box 渐变背景是标准特性；若遇兼容问题，可退回用一张细长渐变图片做 background-repeat 实现。