h5优惠券“剪刀虚线”动态效果用repeating-linear-gradient+background-position位移实现，四边环绕推荐伪元素方案，需适配圆角与剪刀图标联动，并注意性能优化和兼容性降级。
在 H5 页面中实现优惠券上的“剪刀虚线”动态移动效果（即蚂蚁线），本质是利用 CSS 关键帧（@keyframes）配合 border-image 或更常用、兼容性更好的 background + 重复渐变（repeating-linear-gradient）来模拟虚线边框，并通过位移动画制造“流动感”。下面分步说明核心实现方式。
用 background + repeating-linear-gradient 模拟蚂蚁线
这是目前最稳定、无需额外图片、支持高清屏且兼容主流移动端浏览器（iOS Safari / Android WebView）的方案。原理是：用线性渐变绘制一段黑白相间的虚线条纹，再通过 background-position 的连续位移，让条纹看起来像在沿着边框“爬行”。
关键代码示例：
.ant-line {
/* 设置虚线背景：1px 黑 + 4px 透明，构成 5px 间距的虚线 */
background: repeating-linear-gradient(
90deg,
#ff4757, /* 蚂蚁线主色（如红色） */
#ff4757 1px,
transparent 1px,
transparent 5px
);
background-size: 5px 5px; /* 控制虚线密度和移动节奏 */
animation: antMove 2s linear infinite;
}
<p>@keyframes antMove {
0% { background-position: 0 0; }
100% { background-position: 5px 0; }
}</p>
⚠️ 注意：该方法适用于矩形容器的某一条边（如上边或右边）。若要四边都动，需分别设置 background 并用伪元素或多个层叠加实现。
四边环绕的蚂蚁线（推荐伪元素方案）
为优惠券加一圈完整流动虚线，建议用两个伪元素（::before 和 ::after）分别承载水平与垂直方向的动画，避免单背景难以控制四边同步的问题。
- 给优惠券容器设
position: relative -
::before覆盖顶部+底部：用横向渐变 +background-position x动画 -
::after覆盖左侧+右侧：用纵向渐变 +background-position y动画 - 两者均设
content: ""、position: absolute，并精确控制尺寸和位置
这样可确保四边虚线节奏一致，且不干扰内部内容布局。
适配圆角优惠券与剪刀图标联动
真实优惠券常带圆角（border-radius）和右上角“剪刀”图标（通常为 SVG 或 iconfont）。注意：
- 纯
background蚂蚁线会受border-radius影响而截断，建议将蚂蚁线层放在优惠券内容层之上，且自身不设圆角；优惠券本体用内边距或遮罩保留圆角视觉 - 剪刀图标可固定定位在右上角，添加轻微旋转动画（如
transform: rotate(-5deg)）增强“即将裁剪”暗示 - 为强化动效感知，可让蚂蚁线速度略快于其他动画（如 1.8s 一圈），营造轻盈跃动感
性能与兼容性提醒
蚂蚁线本质是高频重绘，需注意优化：
- 优先使用
transform和opacity触发 GPU 加速（但本方案中background-position在多数新版本 WebKit 中也已硬件加速） - 避免在长列表或滚动区域大量使用；可进入视区后再启动动画（IntersectionObserver 控制）
- Android 4.x 旧 WebView 不支持
repeating-linear-gradient，需降级为 base64 小图平铺（background: url(data:image/png;base64,...)）+ 位移动画 - iOS Safari 对
background-size小数值敏感，建议用整数（如4px、5px）
不复杂但容易忽略细节。按上述方式组合，就能做出既轻量又吸睛的优惠券蚂蚁线效果。
