卡片悬停跳动需设 transform 初始值并仅过渡 transform；阴影用 filter 更自然；放大用 transform 而非尺寸属性；移动端需 touch-action 和 :active 配合。
卡片悬停时内容突然跳动？检查 transform 和 transition 的组合
常见现象是鼠标移上去，文字或图标“抖一下”或者位置偏移后回弹不平滑。根本原因通常是 transform 和 transition 作用在不同属性上，或未设初始状态。
- 必须给卡片容器设置
transform: scale(1)或transform: translateY(0)作为初始值，否则首次悬停会触发浏览器重绘抖动 -
transition只写transform 0.3s ease，别加all——否则边框、内边距变化也会被过渡，导致布局膨胀 - 如果用了
margin-top模拟上浮效果，改用transform: translateY(-8px)更高效，且不触发重排
阴影和背景渐变更自然？用 filter + background-clip 配合
单纯靠 box-shadow 悬停变深，容易显得生硬；纯改 background-color 又缺乏层次感。更可控的做法是混合使用 filter 和背景裁剪。
- 悬停时加
filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15))，比box-shadow更贴合元素轮廓，且支持多层阴影叠加 - 如果卡片有渐变背景，确保
background-clip: padding-box（默认值），避免圆角处阴影被裁掉 - 不要对
filter做过渡——它本身不触发重排，但部分旧版 Safari 对filter过渡支持差，稳妥起见只过渡transform和opacity
文字/图标悬停放大却不撑开布局？用 transform-origin + overflow-hidden
直接给子元素设 font-size: 1.2em 或 width: 120%，会导致父卡片高度突变，破坏网格对齐。
- 对需要放大的元素（如图标、标题）用
transform: scale(1.15)，并设transform-origin: center - 卡片容器加
overflow: hidden，防止缩放后内容溢出干扰相邻卡片 - 若用 Flex/Grid 布局，确保卡片项设了
min-height或align-items: flex-start，避免文字放大后底部对齐错位
移动端点击无反馈？补上 touch-action 和 :active 状态
在 iOS Safari 或安卓 Chrome 上，悬停效果常失效，用户点一下没反应，误以为交互失灵。
- 给卡片加
touch-action: manipulation，让系统知道这是可交互区域，减少 300ms 延迟 - 补充
:active样式：比如transform: scale(0.98)，模拟按下反馈，别只依赖:hover - 真机调试时注意：iOS 不触发
:hover伪类（除非是<a></a>标签），所以关键反馈逻辑尽量用 JS 绑定touchstart/touchend实现
transform 和 will-change 控制在最小粒度，以及是否在真实设备上验证过触摸反馈。动画越少，越不容易翻车。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
