贝塞尔曲线生成器
拖拽控制点设计缓动曲线，复制 cubic-bezier，拖拽手柄或输入坐标，实时预览并复制 CSS。
曲线预览
动画预览
生成的 CSS
使用说明
拖拽两个控制点设计 cubic-bezier 缓动曲线，实时预览动画速度变化，复制代码用于 transition 与 animation。纯浏览器本地运行。
- 在坐标系中拖拽 P1、P2 两个控制点。
- 观察小球或进度条的运动快慢变化。
- 需要时套用 ease、ease-in 等预设对比。
- 复制 cubic-bezier(x1,y1,x2,y2) 代码。
常见问题
- 控制点的 x 值范围是多少？
- 两个控制点的 x 必须在 0~1 之间，y 可超出范围形成回弹效果。
- 用在哪些属性？
- transition-timing-function 与 animation-timing-function。
- 数据会上传吗？
- 不会，本地计算。