悬浮上浮
Hover Lift
别名:卡片悬浮hover 浮起鼠标放上去浮起来上浮效果悬停抬升卡片浮起来
这是什么
鼠标悬停时卡片或按钮轻轻上浮（translateY -2～6px）并加深投影， 像被无形的手托起。最常见的"这个可以点"的桌面端暗示， 成本极低但立刻让页面有层次和呼吸感。
交互实验室
试一试，再决定怎么用正在加载演示…
✓ 适用场景
- 卡片网格、商品卡、文章卡等可点击块
- 桌面端为主的交互（hover 是桌面专属语言）
- 平面层级需要区分可交互与静态元素
✕ 不适用场景
- 触屏设备（没有 hover，会粘滞），改用按压反馈
- 页面上所有元素都上浮（通胀，暗示失效）
- 大幅位移（> 8px 会显得跳动）
常见形式
上浮 + 投影
Lift + shadow
经典组合，-4px + 阴影加深
上浮 + 微放大
Lift + scale
叠加 scale(1.02)，电商感更强
上浮 + 边框着色
Lift + border
投影换成强调色边框，扁平风格适用
实现要点
transform: translateYbox-shadowtransition:hovertransition: transform 200ms ease, box-shadow 200ms；hover 时 translateY(-4px) + 更大更淡的 box-shadow（如 0 12px 24px rgba(0,0,0,.12)）。注意上浮方向始终向上， 阴影随之上移。与 press-feedback 组合时：hover 上浮、active 缩回，层次分明。
横向对比
查看完整对比 →交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
为当前项目的卡片列表添加 hover 上浮反馈。 先检查现有卡片组件，保持圆角与阴影令牌一致。 要求： - hover 上移 4px + 阴影加深，200ms 过渡 - 仅在支持 hover 的设备启用（@media hover:hover） - 尊重 prefers-reduced-motion - 不影响布局（transform 实现） 完成后运行现有检查，说明修改文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
用户按下按钮、卡片等可点击元素时，元素轻微缩小（通常 0.95～0.98）， 松开后弹回。一个几十毫秒的细节，让界面"手感"立刻从网页变成实体按键。
动效相似概念鼠标悬停时元素边缘泛出柔和光晕，用外发光阴影或径向渐变沿边框晕开， 颜色多为品牌强调色。相比投影的"物理抬升"，光晕暗示的是"能量"与"可交互"， 常用于深色界面、游戏感产品与霓虹风格按钮。
动效替代方案用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件应用于鼠标靠近按钮时，按钮像被磁铁吸住一样朝光标方向偏移一小段距离， 离开后弹性归位。偏移量按光标与按钮中心的距离计算，通常限制在 8～20px。 一种高"手感"的桌面端彩蛋交互，常出现在作品集与创意官网。
动效相似概念