开发者免费本地运行
三次贝塞尔编辑器
直观地设计 CSS 三次贝塞尔缓动曲线——拖动句柄、预览动作、复制 CSS。
CSS
cubic-bezier(0.25, 0.1, 0.25, 1)预览
预设
拖动绿色手柄或使用滑块调整曲线。
关于三次贝塞尔编辑器
Handytool 的三次贝塞尔编辑器让您以预期的方式设计 CSS 缓动曲线——通过拖动两个控制点直到动作感觉正确。从熟悉的预设（ease、linear、ease-in-out）开始并从那里调整，或自由移动句柄以创建您自己的。伴随的球动画以您选择的持续时间播放曲线，所以您可以在粘贴 cubic-bezier(...) 到您的过渡之前感受计时。
三次贝塞尔编辑器功能
- 01
拖动曲线、看到动作
两个可拖动的句柄控制贝塞尔的开始和结束。伴随的球动画在您选择的持续时间播放曲线，所以您可以在离开页面前预览超调和缓出感。
- 02
所有标准预设
从 CSS 的内置 ease、linear、ease-in、ease-out 和 ease-in-out 开始——然后调整。移动句柄时预设自动切换回 "custom"。
- 03
一键复制 CSS
cubic-bezier() 值以两位小数精度实时更新，可直接放入 transition-timing-function 或 animation-timing-function。
三次贝塞尔编辑器常见问题
- 为什么 Y 值可以超过 1 或低于 0？
- 范围外的贝塞尔控制点产生超调和欠调效果——曲线在定居前超过其端点。这就是 "弹性" 缓动曲线的制作方式；X 轴仍必须保持在 0–1 中。
- 我如何使用输出？
- 复制 cubic-bezier(...) 字符串并将其粘贴到任何 CSS transition-timing-function 或 animation-timing-function 值中。它在每个现代浏览器中都有效。
- 预览对 CSS 的准确性如何？
- 是的——预览使用与浏览器对过渡使用的相同三次贝塞尔公式来制作球从 0 到 100% 的动画。持续时间滑块让您在提交之前感受慢速与快速曲线。
- ease-in-out 实际上意味着什么？
- Ease-in-out 开始缓慢，在中间加速，然后再次在结束时减速——cubic-bezier(0.42, 0, 0.58, 1) 曲线。它是大多数精美 UI 动作的默认选择，因为它反映了实体物体加速和减速的方式。