卡片悬停上浮本质是用transform: translateY()配合transition实现，避免margin/top触发重排；推荐translateY(-8px)与transition: transform 0.3s ease组合，并加will-change: transform优化性能。
卡片 hover 上移效果本质是用 transform: translateY() 配合过渡动画，不是靠 margin 或 top 位移——后者会触发重排，性能差且容易抖动。
为什么用 transform 而不是 margin-top
直接改 margin-top 或 top 会让浏览器重新计算布局（reflow），尤其在多卡片网格中，滚动或悬停时容易卡顿；transform 属于合成层操作，由 GPU 加速，动画更顺滑。
-
transform: translateY(-8px)是推荐写法，数值按需调整（常见 -5px 到 -12px） - 必须搭配
transition: transform 0.3s ease，否则没动画 - 别漏写
will-change: transform（可选，对长列表有轻微优化）
:hover 触发时怎么避免文字/图标错位
卡片内如果用了 display: inline-block 或未清除浮动的子元素，transform 可能导致基线偏移，文字看起来“跳”得不整齐。
- 给卡片容器加
overflow: hidden，防止子元素溢出影响渲染 - 子元素统一用
vertical-align: top或改用flex布局 - 图标字体（如 Font Awesome）建议用
font-size控制大小，别依赖line-height居中
移动端 hover 失效？要兼容触摸设备
真机上没有 “hover” 状态，纯 :hover 在 iOS/Android 浏览器里基本不触发（除非模拟鼠标模式）。不能只靠 CSS。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 简单方案：加
@media (hover: hover) and (pointer: fine)媒体查询，只对支持悬停的设备启用上移效果 - 更稳妥做法：用 JS 监听
touchstart+touchend模拟 hover 类（比如加is-hovered类） - 注意：别在
touchstart里立刻加类，要防误触，可加setTimeout延迟 150ms 再判断是否为长按
多个卡片同时 hover，怎么控制只动当前一个
常见错误是给父容器加 hover，结果所有子卡片一起动。关键在选择器粒度。
- 确保样式写在卡片自身元素上，例如：
.card:hover { transform: translateY(-8px); } - 避免写成
.card-container:hover .card—— 这样只要鼠标进容器，哪怕没悬停卡片也会动 - 如果用 CSS-in-JS 或框架（如 Tailwind），检查是否意外把 hover 类作用到了 wrapper 上
真正难的不是让卡片动起来，而是动得稳、动得准、动得不干扰其他交互——尤其是混合了图片懒加载、阴影展开、文字截断的卡片，transform 的层级和渲染行为得反复调。
