纯CSS可实现H5背景渐变色无限循环流动动画，核心是linear-gradient配合background-size放大与background-position位移动画，需首尾色一致、用linear缓动、避免直接作用于body，并添加-webkit前缀保障兼容性。
在 H5 页面中实现背景渐变色的无限循环流动动画，核心是结合 CSS 的 linear-gradient、background-size 和 background-position 配合 @keyframes 动画，并通过控制背景图的位移制造“流动”错觉。它不依赖 JavaScript，纯 CSS 即可高效完成。
使用 background-position 动画驱动渐变位移
关键在于把渐变当作一张“大背景图”，通过改变它的位置，让颜色带持续滑入视口，形成流动感：
- 设置
background-image: linear-gradient(...)，方向建议用to right或45deg - 用
background-size扩大渐变尺寸（如200% 200%），确保位移时有足够颜色区域可滚动 - 用
background-position控制起始位置（如0% 50%），并在动画中改变它（如100% 50%） - 动画时长设为
ease-in-out或linear，配合infinite实现无缝循环
避免视觉卡顿：无缝循环的关键细节
流动动画卡顿或跳变，通常是因为渐变色块衔接不自然：
- 至少使用 3 个颜色节点，首尾颜色相同或高度相近（例如：
red, orange, red），让位移终点与起点视觉一致 - 动画时间函数推荐
linear，避免ease类缓动导致速度不均、中断感 - 若用
to right方向，background-size宽度设为200%，background-position从0% 50%→100% 50%；若用to bottom，则调高高度并移动 Y 轴
兼容性与移动端适配提示
该方案在现代 H5 环境（iOS Safari、Android Chrome、微信内置浏览器）基本全覆盖，但需注意：
- 避免在
<body>上直接写动画背景——部分安卓 WebView 对 body 动画支持不稳定，建议套一层<div class="bg-flow">并设position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; - 添加
-webkit-前缀（尤其 iOS 12-14）：-webkit-background-size、-webkit-animation - 如需响应式，可用
min-height: 100vh替代固定高度，防止短内容页面动画被截断
一个可直接复制的最小示例
将以下代码放入页面 <style> 中即可运行：
.flow-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #44b5b1, #ff6b6b);
background-size: 300% 300%;
-webkit-animation: gradientShift 8s ease infinite;
animation: gradientShift 8s ease infinite;
}
@-webkit-keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
把 <div class="flow-bg"></div> 放在 <body> 开头，就能看到平滑流动的渐变背景。
