渐变流动背景特效（纯 CSS 动画，速度/颜色实时可调）

效果演示（真实可交互）

完整代码

<div class="flow-bg"></div>

.flow-bg {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
  background: #0f1117;
  isolation: isolate;
}
.flow-bg::before {
  content: '';
  position: absolute;
  inset: -50%;
  z-index: -2;
  background: linear-gradient(115deg, #4f6ef7, #f74f9e, #22d3ee, #fbbf24, #4f6ef7);
  background-size: 300% 300%;
  animation: flowShift 10s ease-in-out infinite alternate;
}
.flow-bg::after {
  content: '';
  position: absolute;
  inset: -50%;
  z-index: -1;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.4) 45deg, transparent 100deg);
  mix-blend-mode: overlay;
  animation: flowSpin 6s linear infinite;
}
@keyframes flowShift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
@keyframes flowSpin {
  to { transform: rotate(360deg); }
}

把渐变颜色替换成你的品牌色即可直接使用；想让文字显示在背景之上，给文字容器加 position: relative; z-index: 1 即可（参考演示中居中的提示文案）。

参数说明

兼容性与性能

• 仅使用 background-position、transform、hue-rotate 三个可合成属性，动画全程 GPU 合成，CPU 占用极低
• ::before/::after 伪元素实现，无需额外 DOM 节点，不污染布局
• mix-blend-mode: overlay 在不支持的旧浏览器中仅表现为缺少高光层，渐变仍正常流动（优雅降级）
• Chrome 84+ / Safari 15+ / Firefox 88+ / Edge 84+ 全支持；移动端表现良好，注意避免与大面积的 filter 叠加使用

常见问题

Q: 这个组件需要 JS 吗？ 不需要。核心效果是纯 CSS 动画，演示页面的滑块只是为了方便你实时调整参数，正式使用时把调好的数值写死在 CSS 里即可，零依赖。

Q: 可以商用吗？ 可以。本组件为粤喵自研原创代码，基于 MIT 思路完全自主实现，免费商用无需署名，也不受任何开源协议限制。

Q: 如何只让背景在一个区块内流动，而不是整个页面？ 直接把 .flow-bg 放进目标区块（如 Hero、Banner），它的定位是基于自身容器的，天然只影响该区域。

Q: 文字在背景上会看不清怎么办？ 三招：给文字加 text-shadow（演示已内置）、降低 ::after 高光的透明度、或把 .flow-bg 下垫一层 rgba(0,0,0,.25) 的遮罩。