应使用 transform: translateY() + transition 实现卡片悬停上移，因 margin-top 或 top 会触发重排导致卡顿、错位及父容器撑开；transform 走合成层、GPU 加速且不干扰布局，需配合 box-shadow 和 z-index 变化，并注意移动端焦点替代及父容器 overflow 问题。
卡片悬停上移用 transform: translateY() 最稳妥
直接改 top 或 margin-top 会触发重排，动画卡顿；transform 走 GPU 加速，初学者也能写出顺滑效果。关键不是“动起来”，而是“动得轻”。
- 只对卡片容器（比如
<div class="card">）加transition: transform 0.3s ease - 悬停时写
transform: translateY(-8px)，数值别超过 12px，否则像跳起来 - 务必给卡片加
overflow: hidden，否则阴影或内容溢出时会穿帮
阴影和圆角要同步增强才显“浮起”感
单纯上移看着像抖动，加点视觉反馈才像真浮起来了。初学者常漏掉这点，结果效果平淡。
- 悬停时同时加
box-shadow: 0 8px 16px rgba(0,0,0,0.1)（比默认阴影更深更扩散） - 圆角保持一致，别在悬停时突然变
border-radius: 12px——除非你刻意做形变，否则统一用border-radius: 8px始终生效 - 如果卡片里有图片，记得设
img { display: block; }，避免底部多出空白缝隙影响上移对齐
移动端要禁用悬停，否则点不中
手机没有 hover 状态，但浏览器可能误触发或延迟响应，导致点第一次没反应、点第二次才生效。
- 用媒体查询包裹悬停样式：
@media (hover: hover) and (pointer: fine) { .card:hover { ... } } - 别依赖
:hover做核心交互，比如“点击展开详情”不能只靠悬停显示——初学者容易把悬停当点击用 - 真要做移动端反馈，改用
:active或 JS 添加is-active类，而不是硬套 hover
内边距和文字行高会影响上移“锚点”
卡片上移后，如果文字突然贴顶或留白突兀，大概率是内部 padding 和 line-height 没压住。
立即学习“前端免费学习笔记（深入）”；
- 卡片内容区用
padding: 1.2rem而非16px，rem 更易随字体缩放保持呼吸感 - 标题用
margin-bottom: 0.5rem，段落用margin-bottom: 0，避免悬停时因外边距塌陷导致跳动 - 测试时在 Chrome DevTools 里勾选“Toggle device toolbar”，真机点两下看是否卡顿或错位
translateY 值和配套的 box-shadow 模糊半径——差 2px，质感就不同。 
