html过渡效果核心三点：transition必须写在基础选择器而非:hover中；初始状态须显式声明（如opacity:1、transform:scale(1)）；悬停时仅修改数值。漏一条即导致跳变或失效。
直接能用、不踩坑的 HTML 过渡效果，核心就三条：写对 transition 位置、初始状态必须显式声明、悬停/激活时只改数值——漏一条，动画就“咔”一下跳变或干脆不动。
transition 写在哪？必须写在基础选择器里
很多人把 transition 放在 :hover 规则里，结果毫无动画。浏览器只在属性值“变化过程”中补帧，而 :hover 是触发态，不是起始态。
-
transition必须定义在非交互的基础样式块中（比如.card、img、button） -
:hover块里只负责改目标值（如transform: scale(1.05)），不写transition - 如果用 JS 动态加类触发，也得确保那个类的上一级基础选择器已声明
transition
filter: brightness() 过渡为什么总失效？三处硬性要求
亮度过渡是高频需求，但也是高频失效点。根本原因不是浏览器不支持，而是 filter 的过渡链极脆弱。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 基础选择器必须写
filter: brightness(1)，不能省略，也不能用filter: none（none不可插值） -
transition: filter 0.3s ease必须和上面那行写在同一规则块里 -
:hover中只能写filter: brightness(0.7)，不能只写brightness(0.7)（缺前缀会整个声明被丢弃） - 若同时调对比度，两边都得写全：
filter: brightness(1) contrast(1)→filter: brightness(0.7) contrast(1.2)
放大/位移类过渡怎么避免页面抖动？优先用 transform
对 width、height、margin 做 transition，大概率引发重排（reflow），卡顿明显；transform 和 opacity 是合成层属性，走 GPU，顺滑得多。
- 放大用
transform: scale(1.1)，别用width: 110% - 移动用
transform: translateX(10px)，别用left: 10px - 想强制硬件加速，加
will-change: transform或backface-visibility: hidden（iOS Safari 尤其需要） - 图片容器必须固定尺寸（
width/height或aspect-ratio），否则object-fit: cover+transform会触发布局偏移
最易被忽略的其实是「初始值显式声明」——哪怕你只想过渡 opacity，也得在基础样式里写 opacity: 1，而不是靠浏览器默认值撑着。CSS 过渡不是“从无到有”，而是“从 A 到 B”，A 必须可读、可计算、不可省略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
