纯色背景切换用transition即可，常见失效原因是body未撑满视口、被background简写覆盖、transition未写在body上或漏写-color后缀；须确保html{height:100%}、body{min-height:100vh;margin:0}，并显式声明transition:background-color。
纯色背景切换，用 transition 就够了；别写 JS 动画帧、别碰 backgroundImage、更别用废弃的 bgcolor——99% 的卡顿和闪回都源于这三件事。
body 背景颜色加 transition 为什么没反应？
最常见原因是 body 没撑满视口，或者被其他 background 声明覆盖了。
- 必须同时写：
body { margin: 0; min-height: 100vh; }和html { height: 100%; }，否则空页面或内容少时，背景只显在文字周围 - 检查有没有
background: url(...)或background: linear-gradient(...)这类简写声明——它会清掉background-color，哪怕你之前写了也无效 - 确保 transition 写在要变色的元素上（通常是
body），且属性名完全匹配：transition: background-color 0.4s ease;，漏掉-color就不生效 - 别依赖浏览器默认值：某些旧版 Safari 对
transition的触发时机不一致，建议显式加background-color: initial;或一个兜底色
用 CSS 变量 + JS 切换背景色的正确姿势
适合主题切换、滚动变色、按钮触发等需要逻辑控制的场景。核心是“JS 只改变量，CSS 负责过渡”。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 在
:root里定义变量：:root { --bg-main: #f0f0f0; }，然后在 body 中引用：body { background-color: var(--bg-main); transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1); } - JS 改值用
document.documentElement.style.setProperty("--bg-main", "#4a90e2");，不是document.body.style.backgroundColor - 避免在循环中高频调用（比如
scroll事件里直接 setProperty）：用requestAnimationFrame节流，或改用IntersectionObserver监听区块进入视口 - 如果要支持深色模式自动适配，加一句：
@media (prefers-color-scheme: dark) { :root { --bg-main: #121212; } }
HSL 模式写渐变色为什么更稳？
RGB 插值容易出脏色（比如红→绿中间蹦出一坨灰黄），HSL 控制色相（h）、饱和度（s）、明度（l）能保证过渡干净，但写法有硬性细节。
立即学习“前端免费学习笔记（深入）”；
- 必须用
hsl(h, s%, l%)格式，其中h是无单位数字（如0、180），s和l后面必须带%（漏掉就静默失效） - 起止色相差建议 ≤180°，否则视觉上仍有跳跃感；固定
s和l（如70%和85%），只动h最安全 - 动画推荐用
@keyframes+animation-fill-mode: forwards锁定终态，比靠 JS 控制帧更可靠 - 示例关键帧：
@keyframes hueShift {<br> 0% { background-color: hsl(0, 70%, 85%); }<br> 100% { background-color: hsl(180, 70%, 85%); }<br>}
最容易被忽略的是：HSL 的单位规则在 Chrome 静默失败、Safari 报错、Firefox 行为不一致——写完务必在三个浏览器里点开开发者工具，看 computed 样式里 background-color 是否真被解析成了 rgb() 值。没解析成功，就是 % 或括号格式错了。
