CSS 三次贝塞尔曲线生成器
编辑 CSS cubic-bezier 缓动曲线的四个控制点，拖动手柄或输入数值，预览曲线并复制 cubic-bezier() 函数。
正在加载工具…
CSS 三次贝塞尔曲线生成器 — 通过调整两个控制点来塑造自定义的 CSS 缓动曲线——直接在预览上拖动手柄，或直接输入 x1、y1、x2、y2——贝塞尔曲线会即时重绘，同时为你生成对应的 cubic-bezier() 值。一切都在浏览器本地计算，你输入的内容绝不会上传。复制结果即可粘贴到 transition-timing-function 或 animation-timing-function 中。
CSS 三次贝塞尔曲线生成器 是什么？
CSS 三次贝塞尔曲线生成器是一款免费的可视化编辑器，用于编辑 CSS 过渡和动画使用的 cubic-bezier() 计时函数，专为前端开发者和动效设计师打造。你可以选择 ease、linear、ease-in、ease-out 或 ease-in-out 等预设，也可以自己微调两个控制点：x 值被限制在合法的 0–1 范围内，而 y 值可以超过 1 或低于 0，从而制造回弹与预备效果。预览会在单位正方形上绘制曲线，让你一眼看清加速与减速，并生成精确的 cubic-bezier(x1, y1, x2, y2) 声明供你复制。当内置关键字显得太普通、你想要更利落、更有弹性或更从容的运动时，就用它。
如何使用 CSS 三次贝塞尔曲线生成器
- 打开设置，选择一个起始预设——ease、linear、ease-in、ease-out 或 ease-in-out——来初始化控制点。
- 在曲线预览上拖动两个圆形手柄来重塑缓动，或在 x1、y1、x2、y2 字段中输入精确数值。
- 让 x1 和 x2 保持在 0 到 1 之间；把 y1 或 y2 推到 1 以上或 0 以下，为运动加入回弹或预备。
- 对照虚线的 linear 基准线观察曲线，判断缓动如何加速和减速。
- 复制生成的 cubic-bezier() 值，粘贴到你的 transition-timing-function 或 animation-timing-function 中。
示例
标准 ease 预设
输入
x1 0.25, y1 0.1, x2 0.25, y2 1
输出
cubic-bezier(0.25, 0.1, 0.25, 1)
Material 风格 ease-out
输入
x1 0, y1 0, x2 0.58, y2 1
输出
cubic-bezier(0, 0, 0.58, 1)
弹性回弹（y 超过 1）
输入
x1 0.34, y1 1.56, x2 0.64, y2 1
输出
cubic-bezier(0.34, 1.56, 0.64, 1)
常见问题
- cubic-bezier 的四个数字是什么意思？
- 它们是两个控制点的坐标：第一个点为 x1、y1，第二个点为 x2、y2。曲线总是从 (0,0) 开始、到 (1,1) 结束；控制点让曲线在中间弯曲，从而控制被动画属性随时间加速和减速的方式。
- 为什么 x1 或 x2 不能超过 1？
- CSS 规范要求两个控制点的 x（时间）坐标必须保持在 0 到 1 之间，以保证计时函数始终是从进度到输出的有效映射。本工具会自动把 x 字段和拖动手柄限制在该范围内。而 y 值可以超过 1 或低于 0，用来制造回弹或预备。
- 如何做出有弹跳感或弹性的缓动？
- 把某个 y 值推到 1 以上（在结尾产生回弹）或低于 0（在开头产生预备）。例如 cubic-bezier(0.34, 1.56, 0.64, 1) 会在稳定前先冲过头，无需任何 JavaScript 即可获得弹簧般的感觉。
- 生成的值用在哪里？
- 把它作为 transition-timing-function 或 animation-timing-function 的值粘贴——例如 transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)。它会用你的自定义曲线替代 ease 或 ease-in-out 等关键字。
- 我的数据会发送到服务器吗？
- 不会。整个编辑器都在你的浏览器中通过 JavaScript 运行——控制点和曲线都在本地计算，绝不上传，因此既能保护隐私，页面加载后甚至还能离线使用。