transition 必须写在基础样式中，统一色彩模型，用 background-position + background-size 实现渐变动画，filter 动画需显式声明初始值。
直接用 transition 控制 background-color 或 background-position 就能实现，但必须写对位置、配对属性、避开不可动画值——否则看起来就是“咔”一下跳变。
transition 必须写在基础样式里，不能只放 :hover 中
浏览器只在属性值变化时查 transition 声明。如果它只存在于 :hover 里，移出时根本不会触发动画，直接回退。
- 错误写法：
.box:hover { transition: background-color 0.3s; }→ 移出无过渡 - 正确写法：
.box { background-color: #f0f0f0; transition: background-color 0.3s ease; }，再配.box:hover { background-color: #333; } - 若同时过渡多个属性，用逗号分隔：
transition: background-color 0.3s, opacity 0.2s;
background-color 过渡要统一色彩模型和透明度
浏览器无法在 rgb(255,0,0) 和 #ff6b6b 之间插值，也不能在 hsl(0,100%,50%) 和 rgba(255,0,0,0.8) 间平滑过渡。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 始终用同一种格式：全用十六进制，或全用
rgb()/rgba()（推荐后者，方便控制透明度） - 避免混用：比如默认用
#fff，悬停却写rgb(240,240,240)→ 动画失效 - 深色模式切换时，
background-color在低端设备上易卡顿，建议优先用transform+opacity组合替代
渐变背景动起来只能靠 background-position + background-size
background-image: linear-gradient() 是静态图，不能直接过渡。真正可动画的是它的“观看窗口”——也就是 background-position，但前提是背景图得比容器大。
- 必须设
background-size: 200% 200%（至少两倍），否则background-position: 100% 50%没效果 - 起始
background-position: 0% 50%，悬停改为100% 50%，方向需匹配渐变角度（水平渐变配左右位移） - 禁用
background: linear-gradient(...)简写 → 它会重置background-position和background-size，导致动画中断 - 多色循环渐变记得首尾色一致，例如：
linear-gradient(90deg, #ff6b6b, #4ecdc4, #44b5b1, #ff6b6b)
filter:brightness() 过渡容易失效的三个硬条件
想让图片或容器亮度顺滑变暗/变亮，filter: brightness() 是最轻量方案，但漏掉任一条件就会跳变。
- 基础样式中必须显式写初始值：
filter: brightness(1);（不能省略，也不能写filter: none;） -
transition: filter 0.3s ease;必须放在非交互态选择器中（如img或.card） -
:hover里只改数值：filter: brightness(0.7);，别漏掉其他已设滤镜（如同时调对比度，两边都要写全） - 父容器若设了
overflow: hidden，brightness(1.2)可能边缘泛白被裁掉，误判为“没动”
真正难的不是写几行 CSS，而是理解哪些属性能被浏览器插值、哪些只是“声明即生效”。background-color 看似简单，但在深色模式频繁切换或低性能设备上，帧率波动明显；而 background-position 配合 background-size 虽然多写两行，却是唯一稳定跨浏览器的渐变动画路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
