这段 HTML 代码实现了自适应彩虹流动渐变文字效果，适合用作网页标题、标语、首页 slogan 展示，示例文案为「心之所向，皆可抵达.」。
- 布局居中：外层 div 设置文本居中对齐，清除内外边距，紧凑行高，文字整体在页面水平居中显示。
- 彩虹文字实现：使用
background‑clip:text将彩色渐变背景裁剪到文字区域，文字设置为透明，让渐变色彩透过文字显现；使用红橙黄绿蓝靛紫完整彩虹色阶。 - 流动动画：通过
@keyframes动画驱动背景位置持续偏移，实现色彩不间断流动滚动效果，4 秒完成一轮循环，线性动画无卡顿闪烁。 - 响应式适配：做了移动端、PC 端区分。手机屏幕使用
1.8rem字号；屏幕宽度大于等于 768px 电脑平板设备自动放大至2.8rem，兼顾大小屏阅读体验。 - 字体细节：选用无衬线现代字体，字体加粗，增加字间距，少量左右内边距，避免渐变动画时文字边缘被裁切，兼容 Webkit 内核浏览器（Chrome、Edge、Safari）。
⚠️注意：旧版 IE 浏览器不支持
background‑clip:text特性，会失效，现代浏览器均可正常渲染。使用方法：直接改里面的文字就好了
JavaScript
<div style="text-align: center; margin: 0; padding: 0; line-height: 1.2;"> <span class="rainbow-text"> 心之所向，皆可抵达. </span> </div> <style> /* 默认（手机端）字体大小 2.0rem */ .rainbow-text { display: inline-block; font-size: 1.8rem; font-weight: 600; font-family: 'Segoe UI', 'Poppins', 'Helvetica Neue', sans-serif; background: linear-gradient(90deg, #ff0000, #ff7700, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3); background-size: 300% auto; background-clip: text; -webkit-background-clip: text; color: transparent; animation: rainbowFlow 4s linear infinite; letter-spacing: 0.02em; padding: 0 0.2rem; } /* 电脑端（屏幕宽度 ≥ 768px）字体放大到 2.8rem */ @media (min-width: 768px) { .rainbow-text { font-size: 2.8rem; } } /* 彩虹流动动画 */ @keyframes rainbowFlow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } </style></div>