CSS关键帧实现边框流动描边动画

前端实现边框流动动画，常见方法包括使用 CSS 背景渐变与 SVG 描边技术。对于标准矩形或圆角框，利用 background 配合 linear-gradient 可实现轻量且兼容性良好的效果；若涉及不规则路径或精确描边控制，则需采用 SVG 的 stroke-dasharray 属性。

border-image 与 @keyframes 的局限性

部分开发者会尝试使用 border 属性配合 @keyframes 改变颜色或宽度。实际上，这种方法只能使整个边框整体闪烁或加粗，无法让描边沿路径移动。CSS 的 border 不支持路径概念，因此无法实现描边流动效果。要模拟描边如画笔般划过的动画，需采用其他思路。

推荐方案：background + linear-gradient 模拟流动边框

这是当前实战中常用的方法。其原理是将元素的 border 设为透明，然后通过 background 绘制四条边。每条边由 linear-gradient 生成一条 1px 宽色带，长度略超过实际边长（如 110%），再通过 background-position 在 @keyframes 中驱动其平移，从而产生四个边框依次流动的视觉效果。

该方案兼容性良好，从 Chrome 26 到 Safari 6.1 均可支持，且无需 JavaScript。实现代码如下：

div {
  border: 2px solid transparent;
  background:
    linear-gradient(to right, #3b82f6, #3b82f6) top,
    linear-gradient(to bottom, #3b82f6, #3b82f6) right,
    linear-gradient(to left, #3b82f6, #3b82f6) bottom,
    linear-gradient(to top, #3b82f6, #3b82f6) left;
  background-size: 110% 2px, 2px 110%, 110% 2px, 2px 110%;
  background-repeat: no-repeat;
  animation: borderFlow 3s linear infinite;
}

@keyframes borderFlow {
  0% { background-position: -10% 0, 100% -10%, 110% 100%, 0 110%; }
  100% { background-position: 100% 0, 100% 100%, -10% 100%, 0 -10%; }
}

实现时需注意以下几点：第一，background-size 的宽度或高度应使用具体像素值（如 2px），避免使用 100%，否则流动过程可能出现变形。第二，动画起始和结束的 background-position 值需精确计算，确保四条边的色块在不同时间点出现，形成连续循环效果，而非同时闪现。第三，此方法对 border-radius 支持有限——背景色条在拐角处会露出直角，可通过 overflow: hidden 裁剪，或改用 SVG 方案。

相比之下，border-image 或 mask 方案存在不足：border-image 虽然能加载渐变图，但 border-image-slice 不支持动画，无法控制流动方向；mask 虽灵活，但 Safari 对 mask-border 的支持仍不完善，维护成本较高。而 background-position 方案简洁可控，适合多数场景。

复杂路径场景：SVG + stroke-dasharray

若目标为不规则形状、文字描边，或需要精确控制描边只走半圈、从特定位置开始，则 CSS 背景方案无法满足。此时需使用 SVG 的 stroke-dasharray 配合 stroke-dashoffset。

实现逻辑如下：先通过 JavaScript 获取路径总长度（getTotalLength()），将该值同时赋给 dasharray 和初始 dashoffset；然后在动画循环中使 dashoffset 逐步减小，虚线部分便如画笔般被推出。由于 CSS 无法动态获取路径长度，因此需借助 JavaScript 计算（除非路径固定不变）。此外，建议添加 stroke-linecap: round，避免描边动画端头突兀。

常见问题在于对“路径长度”和“偏移方向”的理解偏差。例如，dashoffset 初始值过大则动画不动，过小则描边反向闪动。需根据实际路径长度调整数值，通过多次测试确认效果。