CSS 动画实战：实现电商中“加入购物车”的抛物线效果

最新推荐文章于 2026-05-08 16:04:06 发布

原创最新推荐文章于 2026-05-08 16:04:06 发布 · 1.7k 阅读

13 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#css #前端 #动画 #购物车 #css3

该文章已生成可运行项目，

引言

在电商网站中，“加入购物车”动画是提升用户体验的经典交互之一。一个小小的商品图标从页面飘向购物车，不仅直观地反馈了操作结果，还能增加趣味性与沉浸感。

实现这一效果的方式有很多，比如 JavaScript 计算路径 + 动画，或者 CSS3 动画 + 贝塞尔曲线。本文将带你从 CSS 动画的基础出发，逐步讲解如何利用 @keyframes、animation-timing-function 以及多层容器组合来实现一个优雅的抛物线加入购物车效果，并提供完整代码案例。

基础代码示例

我们先来看一个利用 嵌套元素 来实现 X 轴匀速、Y
轴曲线运动的抛物线动画。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Parabola Animation</title>
  </head>
  <body>
    <div class="container">
      <div class="box-x">
        <div class="box-y"><div class="box"></div></div>
      </div>
    </div>
  </body>
  <style>
    :root {
      --containerWidth: 400px;
      --containerHeight: 400px;
    }
    .container {
      width: var(--containerWidth);
      height: var(--containerHeight);
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid black;
    }
    /* X 轴：匀速运动 */
    .box-x {
      animation: jumpX 0.8s infinite linear;
    }
    /* Y 轴：使用曲线模拟加速下落、减速上升 */
    .box-y {
      animation: jumpY 0.8s infinite cubic-bezier(0.75, 0.06, 0.94, 0.88);
    }
    .box {
      width: 30px;
      height: 30px;
      background-color: blueviolet;
      border-radius: 50%;
    }
    @keyframes jumpX {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(calc(var(--containerWidth) - 30px));
      }
    }
    @keyframes jumpY {
      from {
        transform: translateY(0);
      }
      to {
        transform: translateY(calc(var(--containerHeight) - 30px));
      }
    }
  </style>
</html>

效果示例

在这里插入图片描述

为什么要用嵌套元素？

问题：transform: translate(x, y) 会同时作用于 X 和
Y，如果我们在一个元素上设置 animation-timing-function，那么 X 和 Y
会同时受到影响。\
解决方案：通过嵌套结构，把 X 和 Y 的运动分开：
- 外层 .box-x 只管 X 轴，并设置 linear 匀速运动；
- 内层 .box-y 只管 Y 轴，并用 cubic-bezier 调整速度曲线。

这样就能实现一个接近 物理抛物线 的运动效果。

animation-timing-function 详解

animation-timing-function 控制动画在
时间进度与实际位置之间的映射关系。常见值如下：

linear
- 匀速运动，没有加速度。\
- 在本例中用于 X 轴运动。
```
animation-timing-function: linear;
```
ease
- 默认值，开始和结束慢，中间快。
```
animation-timing-function: ease;
```
ease-in
- 由慢到快，模拟加速进入。\
- 常用于模拟"加速下落"。
```
animation-timing-function: ease-in;
```
ease-out
- 由快到慢，模拟减速停止。\
- 常用于"物体上升或停止"。
```
animation-timing-function: ease-out;
```
ease-in-out
- 先加速，后减速。\
- 常用于"自然的往返运动"。
```
animation-timing-function: ease-in-out;
```
cubic-bezier(n, n, n, n)
- 自定义贝塞尔曲线，范围为 0 ~ 1。\
- 我们示例中的参数 cubic-bezier(0.75, 0.06, 0.94, 0.88)，表现为
  快速下落、缓慢上升，模拟重力加速度。
```
animation-timing-function: cubic-bezier(0.75, 0.06, 0.94, 0.88);
```