当前位置：首页 > news >正文

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

news 2025/9/13 6:19:35

引言

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

实现这一效果的方式有很多，比如 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);
```