用css linear-gradient实现按钮彩虹渐变需手动设定6段色标（红橙黄绿青紫）覆盖0%–100%，每段约16.6%；加background-size与background-position动画可实现平滑位移效果，推荐4s ease-in-out循环。
用 CSS linear-gradient 实现按钮彩虹渐变
直接给 background 设置多色 linear-gradient 就能出彩虹效果，但关键在色标位置和颜色顺序——浏览器不会自动“均匀分配”，必须手动指定停靠点，否则容易偏色或断层。
推荐用 6 段色标覆盖整个 0%–100%，对应红橙黄绿青紫，每段占约 16.6%：
background: linear-gradient(90deg, #ff0000 0%, #ff8000 16.6%, #ffff00 33.3%, #00ff00 50%, #00ffff 66.6%, #8000ff 83.3%, #ff00ff 100% );
- 角度写
90deg是横向彩虹；改成180deg就是竖向 - 所有百分比必须严格递增，且首尾为
0%和100%，否则 Safari 可能渲染异常 - 别用 HSL 动态生成色环（如
hsl(0, 100%, 50%)到hsl(360, 100%, 50%)），Chrome 对 HSL 渐变插值不一致，实际会偏粉/偏灰
让彩虹动起来：background-position + animation
静态渐变不够“彩虹”，加位移动画才鲜活。核心是把渐变设为足够宽（比如 200%），再用 background-size 控制可见区域，靠 background-position 平移：
background: linear-gradient(90deg,
#ff0000, #ff8000, #ffff00,
#00ff00, #00ffff, #8000ff, #ff00ff
);
background-size: 200% 100%;
animation: rainbowShift 4s ease-in-out infinite;
@keyframes rainbowShift {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
- 必须同时设置
background-size和background-position，只动一个没效果 -
ease-in-out比linear更自然，避免生硬抽搐感 - 动画时间设
4s是经验值：短于2s易眼花，长于6s显呆滞
兼容性与性能注意点
老版 Edge（linear-gradient，但现代项目基本可忽略；真正要小心的是移动端重绘开销——渐变动画触发的是 background-position，属于合成属性，通常走 GPU，但若按钮有 box-shadow 或 border-radius 过大，部分安卓 WebView 仍可能掉帧。
- 务必加
will-change: background-position提前告知浏览器优化路径 - 避免在
:hover里突然启停动画，用transition平滑衔接更稳妥 - 如果按钮文字多、内容重，建议限制动画仅在
:focus-visible或点击反馈时触发，而非常驻
想换色？别改代码，用 CSS 自定义属性动态控制
把颜色抽成 --rainbow-1 到 --rainbow-7，就能用 JS 或媒体查询切换主题，不用碰 CSS 文件：
button.rainbow {
--rainbow-1: #ff0000;
--rainbow-2: #ff8000;
--rainbow-3: #ffff00;
--rainbow-4: #00ff00;
--rainbow-5: #00ffff;
--rainbow-6: #8000ff;
--rainbow-7: #ff00ff;
background: linear-gradient(90deg,
var(--rainbow-1), var(--rainbow-2), var(--rainbow-3),
var(--rainbow-4), var(--rainbow-5), var(--rainbow-6),
var(--rainbow-7)
);
}
- 自定义属性名带
rainbow-前缀，避免和项目其他变量冲突 - 不能在
linear-gradient里混用var()和百分比色标（如var(--c) 20%），部分浏览器解析失败，统一用纯色序列最稳 - 深色模式下可直接重设这些变量，无需额外媒体查询嵌套
background-size 与 background-position 的配合，少一个参数就可能静止不动。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
