h5页面中实现霓虹流光边框动画需用css多重线性渐变+伪元素+位移动画：::before和::after分别设不同速度的渐变光带（如3.4s/3s），background-size为200% 100%，background-position从-100%到100%循环移动，配合border-radius和gpu加速优化性能。
在 H5 页面中实现「霓虹流光边框 + 循环奔跑」的特惠标签动画，核心是结合 CSS 渐变（linear-gradient）+ 动画位移（background-position）+ 伪元素边框模拟，不依赖 JS，轻量且兼容主流移动端浏览器（iOS Safari、Android Chrome ≥ 62）。
一、用多重渐变 + 位移模拟流光奔跑效果
不能直接给 border 写 animation，所以把「发光边框」做成一个宽高覆盖标签的伪元素（如 ::after），用线性渐变绘制一条亮色光带，再通过 background-position 水平移动，形成「光条循环扫过」的视觉。
- 渐变方向设为 90deg（从左到右），中间一段高亮（如 #00eeff），两侧透明或暗色过渡
- background-size 设为 200% 100%，这样 background-position 从 0% → -100% 移动时，光条能完整跑完一圈
- animation: glowMove 3s linear infinite，让光持续循环
二、叠加多层发光实现霓虹感
单层渐变不够“霓虹”，需叠加 2–3 层不同颜色、不同偏移速度的光带：
- ::after 绘制主光带（青蓝色，速度中等）
- ::before 绘制外扩阴影光晕（用 box-shadow 模拟柔边蓝紫辉光，或再叠一层慢速粉紫渐变）
- 关键：各层 animation-duration 略有差异（如 2.8s / 3s / 3.4s），避免同步重复，增强流动错落感
三、适配移动端标签结构与性能优化
推荐 HTML 结构简洁：<span class="tag-sale">限时特惠</span>，CSS 全部作用于该元素及其伪元素。
- 务必加
transform: translateZ(0)或will-change: background-position，触发 GPU 加速，防止 iOS 上动画掉帧 - 避免使用 box-shadow 做主体发光（耗性能），优先用 background-gradient + 伪元素
- 边框粗细建议 2px–4px，太粗会模糊；流光宽度控制在 20%–30% 背景宽度内更自然
四、可直接复用的精简代码示例
复制即用（已测试 iOS 16+ / Android 12+）：
.tag-sale {
position: relative;
display: inline-block;
padding: 6px 16px;
font-size: 14px;
font-weight: bold;
color: #fff;
line-height: 1;
}
.tag-sale::before,
.tag-sale::after {
content: '';
position: absolute;
top: -2px; right: -2px; bottom: -2px; left: -2px;
z-index: -1;
border-radius: 4px;
}
.tag-sale::before {
background: linear-gradient(90deg, transparent, #ff00cc, #00eeff, transparent);
background-size: 200% 100%;
animation: glowMove 3.4s linear infinite;
}
.tag-sale::after {
background: linear-gradient(90deg, transparent, #00aaff, #00eeff, transparent);
background-size: 200% 100%;
animation: glowMove 3s linear infinite;
}
@keyframes glowMove {
0% { background-position: -100% 0; }
100% { background-position: 100% 0; }
}
/* 可选：加一层微弱外发光提升层次 */
.tag-sale {
box-shadow: 0 0 10px rgba(0, 238, 255, 0.3);
}
