CSS 抛物线最小示例
前 3 个示例只保留最简单的 DOM 和核心 CSS 逻辑，最后一个示例补上工程中更常见的动态终点做法。
方案一：两层嵌套
外层控制 X 轴匀速，内层控制 Y 轴贝塞尔位移。
核心：`translateX + translateY` 分层组合。
方案二：关键帧手写轨迹
在单个元素上直接写几个轨迹点，形成近似抛物线。
核心：`@keyframes` 中逐段写 `translate(x, y)`。
方案三：Motion Path
直接定义一条路径，让元素沿路径前进。
核心：`offset-path + offset-distance`。
工程推荐：CSS 变量 + 动态距离
点击触发按钮后，实时计算起点和购物车之间的位移，再通过 CSS 变量驱动动画。
核心：JS 计算 `dx`、`dy`，CSS 使用 `var(--dx)`、`var(--dy)`。