应使用 transform: translatey() + transition 实现卡片悬停上移，因 margin-top 或 top 会触发重排导致卡顿、错位及父容器撑开；transform 走合成层、gpu 加速且不干扰布局，需配合 box-shadow 和 z-index 变化，并注意移动端焦点替代及父容器 overflow 问题。

卡片悬停上移用 transform: translateY() 最稳妥

直接改 top 或 margin-top 会触发重排，动画卡顿；transform 走 GPU 加速，初学者也能写出顺滑效果。关键不是“动起来”，而是“动得轻”。

• 只对卡片容器（比如 <div class="card">）加 <code>transition: transform 0.3s ease
• 悬停时写 transform: translateY(-8px)，数值别超过 12px，否则像跳起来
• 务必给卡片加 overflow: hidden，否则阴影或内容溢出时会穿帮

阴影和圆角要同步增强才显“浮起”感

单纯上移看着像抖动，加点视觉反馈才像真浮起来了。初学者常漏掉这点，结果效果平淡。


html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
下载
• 悬停时同时加 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”，真机点两下看是否卡顿或错位
实际效果好不好，不取决于动画多炫，而在于上移时边缘是否干净、阴影是否自然、点按是否可靠。初学者最容易反复调试的，其实是那 8px 的 translateY 值和配套的 box-shadow 模糊半径——差 2px，质感就不同。