纯 css 无法生成真正随机颜色，因 @keyframes 和 transition 只能按预设序列循环，无法每次触发时重新计算；必须由 javascript 调用 math.random() 生成合法 hex 或 hsl 值，并通过 css 变量注入样式。
纯 CSS 无法生成随机颜色，Math.random() 只能在 JavaScript 中运行；所谓“CSS 实现”，本质是用 JS 计算颜色值，再通过 CSS 变量注入到样式中。
为什么不能只靠 @keyframes 或 transition 实现真正随机
CSS 动画和过渡只能按预设序列循环，无法每次取不同值。即使写 100 个 keyframes 帧，也只是固定色表轮播，不是随机——用户刷新页面后看到的仍是同一套顺序。真正的随机必须在每次触发时重新计算，这一步只能由 JS 完成。
Math.random() 生成 hex 色值的正确写法
常见错误是直接拼接 Math.random().toString(16)，结果可能含小数点、字母 g、长度不足 6 位（如 "ff0"），导致无效颜色。稳妥做法是：
- 用
Math.floor(Math.random() * 0xffffff)保证整数且在#000000–#ffffff范围内 - 转十六进制后用
.toString(16).padStart(6, '0')补零，确保始终为 6 位 - 拼上
#前缀，得到合法#a3f8c1格式
示例函数：
function randomHex() {<br> return '#' + Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0');<br>}
如何把 JS 随机色应用到页面背景（不卡顿）
关键不是“怎么赋值”，而是“在哪赋、何时触、怎么动”：
- 把
transition: background-color 0.4s ease写在:root或body上，不要写在动态添加的 class 里 - 避免高频触发：别在
scroll、mousemove里调用，哪怕加了防抖，也容易堆积重排 - 如果用
setInterval自动切换，间隔至少设为500ms，否则过渡会被中断，视觉跳变 - 更新变量用
document.documentElement.style.setProperty('--bg-color', color)，比操作style属性或 class 更轻量
最易被忽略的一点：HSL 比 HEX 更可控。比如 hsl(${Math.random()*360}, 70%, 60%) 看似简洁，但明度固定会导致部分颜色发灰或刺眼；若需适配深色背景，应手动限制 l 在 55%–85% 区间，而不是依赖全随机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
