彩虹流动文字
彩虹流动文字：渐变背景放大 3 倍，再用 animation 持续平移 background-position，配合 background-clip: text，文字上就像有彩色流光掠过。
要点：背景必须比文字大（300% 或更大），否则平移会露出边缘；linear 无限循环最平滑，配 logo、横幅标题非常吸睛。
- background-size: 300% 放大渐变，避免平移露边
- animation: move 3s linear infinite 移动 background-position
- 渐变色多取几个色标（≥4 色）流动更丰富
HTML
<style> .rainbow { text-align: center; font-size: 48px; font-weight: 800; margin: 50px 0; background: linear-gradient(90deg, #f778ba, #e78a3e, #57ab5a, #4a9eff, #a371f7, #f778ba); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: flow 3s linear infinite; } @keyframes flow { to { background-position: 300% 0; } } </style> <div class="rainbow">彩虹流动文字 RAINBOW</div>
本节要点流光文字 = 300% 渐变 + 持续平移 background-position + background-clip:text。
