HTML5 中怎么通过 CSS 动画实现购物车抛物线飞入特效-H5教程-PHP中文网

购物车抛物线飞入效果通过CSS动画模拟抛物线轨迹：动态创建绝对定位小球，用transform: translate()配合cubic-bezier缓动与非线性y位移关键帧（0%→50%↑→100%↓）实现先升后降弧线，JS仅负责初始坐标计算与元素清理，兼顾性能、兼容性与体验。

html5 中怎么通过 css 动画实现购物车抛物线飞入特效

购物车抛物线飞入效果，本质是让元素从点击位置平滑运动到购物车图标位置，同时模拟抛物线轨迹（即先上升后下降的弧线）。纯 CSS 无法直接定义抛物线路径，但可以通过 transform: translate() 配合贝塞尔曲线 timing-function + 关键帧中 y 方向位移的非线性变化 来视觉上逼近抛物线效果，无需 JS 计算路径，兼容性好且性能高。

1. 基础结构：准备可动画的飞入小球

点击商品时动态创建一个绝对定位的小球元素（如），初始位置设为点击处（用 JS 获取坐标），目标是购物车图标位置。CSS 动画作用于这个临时元素：

给 .fly-ball 设置 position: fixed;（脱离文档流，避免布局干扰）和基础样式（宽高、背景、圆角、z-index）
用 transform: translate(x, y) 控制位移，不触发重排，性能最优
动画时长建议 400–600ms，太短生硬，太长拖沓

2. 关键帧设计：用 y 位移+缓动模拟抛物线

真正实现“抛物感”的核心在 @keyframes 中 y 轴位移的节奏控制——不是匀速，而是先快上升、再慢顶点、再快下落，配合 cubic-bezier(0.2, 0.8, 0.4, 1) 这类加速-减速曲线更自然：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

@keyframes flyToCart {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(120px, -80px) scale(0.8); /* 顶点偏上、略缩小，增强动感 */
  }
  100% {
    transform: translate(200px, 30px) scale(1); /* 精确落到购物车图标中心 */
  }
}

50% 处设置较大负 y 值（向上），形成“抛起”；终值 y 小于起点（向下落进购物车）
x 位移全程递增，y 位移先负后正，构成视觉抛物线
加入 scale(0.8) 在中途缩小，落地时恢复，强化运动纵深感

3. 定位与坐标适配：JS 只负责初始位置，不参与动画

CSS 动画本身不依赖 JS 坐标计算，但小球的初始 left/top 必须精准。用 JS 获取点击位置和购物车图标位置（均转为视口坐标），再设置小球的起始偏移：

用 getBoundingClientRect() 获取商品元素和购物车图标的 top/left
小球 style.left = clickX + 'px'; style.top = clickY + 'px';
动画的 translate() 值 = (cartX - clickX, cartY - clickY) 的差值（注意：y 差值需加“上抛量”，比如额外 -60px）
动画结束后用 remove() 清理 DOM，避免堆积