关键在于box-shadow与transform协同过渡：默认状态必须显式声明轻量阴影（如0 2px 6px -2px rgba(0,0,0,0.08)），transition限定为box-shadow和transform，悬停时同步调整offset-y、blur-radius、spread-radius并配合translateY(-3px)，同时适配深色模式与移动端:active反馈。

网页商品卡片实现浮起阴影加深动效，关键不是堆参数，而是让视觉反馈符合“轻抬、微升、稳落”的物理直觉。核心靠 box-shadow 和 transform 协同过渡，且必须显式声明初始状态和精准控制动画属性。

基础结构：先写默认阴影，再定义过渡

很多动效失效，是因为默认状态没写 box-shadow。浏览器无法从“无”到“有”做插值，transition 就不触发。

• 默认状态必须设一个轻量阴影，例如：box-shadow: 0 2px 6px -2px rgba(0,0,0,0.08);
• transition 要写在默认规则里，只作用于相关属性：transition: box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
• 避免 transition: all——它会监听 background-color、border 等无关变化，导致意外重绘或卡顿

悬停效果：同步调整阴影与位移

单纯加大模糊值会让阴影发虚；只改偏移又像“飘在空中”。真正自然的浮起，是三者微调：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 垂直偏移（offset-y）：从 2px → 6px，模拟轻微上浮，但卡片本身位置不变
• 模糊半径（blur-radius）：从 6px → 16px，增强层次感，别用小数（如 0.5px），高 DPI 下易糊
• 扩散半径（spread-radius）：用负值收束，如 -2px → -4px，防止阴影“撑开”卡片边界
• 配合 transform: translateY(-3px) 让卡片真往上挪一点，强化抬升感，但幅度要小（≤6px），否则影响布局

深色模式与移动端适配

固定 rgba(0,0,0,0.2) 在深色背景上会变灰甚至不可见；而移动端点击不触发 :hover 是常态，不能只依赖它。

• 用 CSS 变量 + 媒体查询适配颜色：--shadow: color-mix(in srgb, black 12%, transparent);，深色模式下切为 white 10%
• 移动端补 :active 状态，加短时过渡：.card:active { transform: translateY(0); box-shadow: 0 2px 6px -2px var(--shadow); }
• 给卡片加 cursor: pointer 和 -webkit-tap-highlight-color: transparent，提升 iOS 点击响应

避坑提醒：常见失真与错位

动效好看，但容易在真实项目中翻车：

• 父容器 overflow: hidden 会直接裁掉阴影——检查 .row、.card-group 或自定义 wrapper 是否限制了溢出
• Flex/Grid 布局中 translate 后相邻卡片错位：因为 transform 不改变文档流，但布局仍按原始尺寸计算。可改用 scale(1.01) 或 top: -3px（需设 position: relative）替代
• 多层阴影导致过渡跳变：确保 hover 前后阴影层数一致。例如默认写两层：0 2px 6px rgba(...), 0 0 0 transparent，悬停时激活第二层