渐变流动背景
渐变流动背景：把超大渐变（300% 或更大）放在 body 或容器上，用 animation 持续移动 background-position，整个背景就缓慢流动。做活动页 Landing 最省事，零图片、零 JS。
想更柔和可以叠加 radial-gradient 制造光斑；加 icon 装饰可用 filter: blur(80px) 的色块做“极光”氛围。
- background-size:300% 放大渐变避免平移露边
- animation 20s+ 慢速循环最优雅（linear）
- 叠加 radial-gradient 或模糊色块 = 极光氛围
HTML
<style> .flow-bg { height: 220px; border-radius: 14px; margin: 30px auto; background: linear-gradient(120deg, #4a9eff, #a371f7, #f778ba, #57ab5a); background-size: 300% 300%; animation: bgFlow 16s ease infinite; } @keyframes bgFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } </style> <div class="flow-bg"></div>
本节要点流动背景 = 300% 多色渐变 + 缓速移动 background-position；零图片零 JS。
