贝塞尔曲线生成器

使用方法

1. 拖拽控制点 — 抓住曲线编辑器上的圆形手柄并移动。水平方向被限制在单位框内；垂直方向可超出框外，用于回弹效果。
2. 从预设开始 — 点击任意预设（ease、ease-in-out、easeOutBack 等）加载其控制点，然后拖拽微调。
3. 观察曲线 — 蓝色曲线就是时间函数本身；虚线对角线作为线性参考。
4. 播放预览 — 点击”播放预览”，圆点会通过真实 CSS transition 以你生成的 cubic-bezier 值运动，旁边有线性参考圆点作对比。
5. 复制 CSS — 输出会实时更新为 cubic-bezier(x1, y1, x2, y2)；点击复制并粘贴到你的样式表中。

功能特点

• 可拖拽曲线编辑器 — 两个控制点统一支持鼠标和触摸（Pointer Events），画布实时绘制网格与线性参考线。
• 支持过冲 — 控制点 y 允许超出 [0,1]，easeOutBack 这类回弹缓动可完整表达；x 则按 CSS 规范钳制在 [0,1] 内。
• 22 个内置预设 — CSS 关键字缓动（ease、ease-in、ease-out、ease-in-out、linear）加上经典命名缓动：Quad、Cubic、Quart、Sine、Expo、Circ 和 Back 系列。
• 诚实的预览 — 圆点由真实 CSS transition 驱动，直接使用你生成的值，所见即浏览器所得。
• 实时 CSS 输出 — 每次拖拽都会更新 cubic-bezier(...) 值，一键复制到剪贴板。
• 100% 客户端运行 — 所有计算都在浏览器中完成，数据不会离开你的设备。

使用场景

• 微交互： 为按钮和开关调出干脆的 ease-out，先用实时圆点验证手感再上线。
• 回弹效果： 把第二个控制点拖出框上方，为弹窗、提示条和活泼的 UI 设计过冲动效。
• 还原设计规范： 复现设计系统中的命名缓动（Material、easeOutBack 风格动效），复制精确数值。
• 学习时间函数： 从预设出发，一次只移动一个控制点，观察曲线与动画如何同步变化。

相关工具

• CSS 盒阴影生成器 — 实时预览设计多层盒阴影。
• 圆角生成器 — 以可视化方式设计圆角，支持椭圆半径。
• CSS Flexbox 生成器 — 以可视化方式设计 Flexbox 布局并复制 CSS。