什么是CSS 贝塞尔曲线生成器？
cubic-bezier() 是 CSS 中定义动画缓动曲线的函数，通过两个控制点 (x1, y1, x2, y2) 决定动画加速、减速还是回弹。这款贝塞尔曲线生成器将抽象的参数可视化：在 SVG 画布上直接拖拽 P1、P2 控制点，实时观察曲线形状和值变化；内置 linear、ease、ease-in、ease-out、ease-in-out 等 8 种预设；支持动画预览（小方块沿曲线运动）和时长调节；一键复制 transition 和 animation 的完整 CSS 代码。纯前端实现，开箱即用。
▶使用场景5个场景
- ◆Web 动画缓动设计
- ◆UI 交互动效开发
- ◆学习贝塞尔曲线原理
- ◆为按钮/弹窗设计过渡效果
- ◆生成可复用的动画代码
▶如何使用？4步
- 1在画布上拖拽 P1、P2 控制点调整曲线
- 2或点击预设按钮快速选择
- 3调节动画时长并点击播放预览
- 4复制生成的 cubic-bezier CSS 代码
▶功能特点8个特点
- ✓免费使用
- ✓无需注册
- ✓可视化拖拽控制点
- ✓8 种预设曲线
- ✓实时动画预览
- ✓时长调节
- ✓一键复制 CSS
- ✓响应式设计
▶常见问题4个问题
cubic-bezier 是什么？
cubic-bezier() 是 CSS 动画的缓动函数，通过两个控制点 (x1, y1, x2, y2) 定义动画速度随时间的变化曲线。
支持负值控制点吗？
支持。y 轴控制点可设为负值或大于 1，实现回弹（bounce）效果。
如何应用到我的项目？
复制生成的 CSS，例如 transition: all 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)，粘贴到您的样式文件中即可。
预设曲线有哪些？
linear、ease、ease-in、ease-out、ease-in-out、bounce-ish、snap、smooth 共 8 种。