📈 贝塞尔曲线生成器

中文 EN

← 全部工具

Updated: 2026-07-11

曲线编辑器

0.25
0.10
0.25
1.00
ease (默认) ease-in ease-out ease-in-out ease-in-out-elastic ease-in-out-bounce ease-in-back ease-out-overshoot
cubic-bezier(0.25, 0.10, 0.25, 1.00)
0%50%100%

💡 什么是贝塞尔曲线？

三次贝塞尔曲线（cubic-bezier）是CSS中定义的缓动函数，通过两个控制点（P1, P2）来描述动画速度的变化曲线。x轴表示时间，y轴表示动画进度。

参数说明

cubic-bezier(x1, y1, x2, y2)

• x1, x2：控制点的水平位置（0~1之间）

• y1, y2：控制点的垂直位置（可超出0~1实现弹性效果）

预设曲线

• ease = cubic-bezier(0.25, 0.1, 0.25, 1)

• ease-in = cubic-bezier(0.42, 0, 1, 1)

• ease-out = cubic-bezier(0, 0, 0.58, 1)

• ease-in-out = cubic-bezier(0.42, 0, 0.58, 1)

如何使用在线贝塞尔曲线生成器

使用在线贝塞尔曲线生成器只需三个简单步骤：

  1. 调整控制点
    在画布上点击并拖拽 P1、P2 两个控制点，或使用下方的四个滑块微调坐标，实时预览曲线形状。
  2. 选择预设曲线
    点击 ease、ease-in、ease-out、ease-in-out 等预设按钮快速套用常用缓动曲线，并可通过"预览动画"查看实际动画效果。
  3. 复制CSS代码
    点击"复制 CSS"即可将生成的 cubic-bezier() 函数复制到剪贴板，粘贴到你的 transition 或 animation 属性中使用。可以无限次调整，没有使用限制。

❓ 常见问题

y值可以大于1或小于0吗？

可以。当y值超出0~1范围时，动画会产生弹性（bounce）或回退（back）效果，配合适当的x值可以实现生动的动画效果。

如何应用到CSS动画？

复制生成的 cubic-bezier() 值，在CSS中的 animation 或 transition 属性中使用即可。例如：transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);

x值为什么限制在0~1之间？

CSS规范要求cubic-bezier的x值在0~1范围内，以确保时间曲线不会出现"回溯"现象，保证动画在指定时间内完成。