CSS三次贝塞尔曲线生成器
从命名的缓动预设（ease、ease-in-out、Material风格的Sine/Quad/Cubic/Back曲线…）或您自己的X1/Y1/X2/Y2控制点构建CSS cubic-bezier()定时函数，并获得实时SVG曲线预览。完全在您的浏览器中运行。
输入
选择命名的缓动曲线，或选择「自定义」以设置您自己的控制点。
仅影响下面的示例过渡线。
输出
Your curve will appear here.
| 属性 | 值 |
|---|---|
| No data yet | |
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-cubic-bezier-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"preset": "ease",
"x1": "0.25",
"y1": "0.1",
"x2": "0.25",
"y2": "1",
"duration": "1"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-cubic-bezier-generator` tool (CSS Cubic Bezier Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-cubic-bezier-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS三次贝塞尔曲线生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
此三次贝塞尔生成器的作用
将四个控制点数值转换为现成的CSS cubic-bezier(x1, y1, x2, y2) 定时函数 —— 您会传递给 transition-timing-function 或 animation-timing-function 的相同值 —— 并绘制这些数值描述的确切曲线，以便您在应用前可以看到缓动效果。从29个命名的预设中选择一个（标准的 ease/ease-in/ease-out/ease-in-out/linear 关键字，加上由easings.net推广并在整个Material Design中使用的更完整的Sine、Quad、Cubic、Quart、Quint、Expo、Circ和Back系列），或切换到自定义并设置您自己的X1/Y1/X2/Y2。
如何使用
- 从下拉菜单中选择预设，或选择自定义。
- 如果您选择了「自定义」，设置X1、Y1、X2和Y2。X1和X2被限制在0–1范围内（CSS规范要求这样）；Y1和Y2可以是任何数值。
- 复制CSS代码块 —— 它包含
transition-timing-function/animation-timing-function声明和按照您选择的持续时间的工作transition:示例。 - 检查曲线预览和曲线详情表格，它会告诉您缓动是标准缓动曲线还是过度过渡曲线。
X1、Y1、X2、Y2实际控制什么？
CSS三次贝塞尔曲线始终从 (0, 0) 开始，以 (1, 1) 结束 —— 这两个点由规范固定，不可配置。X1/Y1和X2/Y2是两个控制点，它们像矢量绘图工具中贝塞尔曲线上的手柄一样拉动曲线。X代表动画持续时间的进度（因此必须在0和1之间 —— 超出该范围的值会使整个 cubic-bezier() 成为无效的CSS，浏览器会忽略它）。Y代表正在动画的属性的进度 —— 并且允许低于0或高于1。
为什么曲线预览会超出边界框？
无论何时Y1或Y2超出0–1范围，动画值都会短暂地超过其目标或在稳定前向后退 —— 这正是 ease-in-back（移动前的轻微「蓄力」）或 ease-out-back（稳定前的轻微过度过渡）等曲线的用途。这是完全有效的CSS，而不是错误；预览的虚线参考框只是使其可见。三次贝塞尔曲线总是保持在由其四个点形成的形状内，因此每当Y1和Y2都在0–1内时，整个曲线也一定在内 —— 这是详情表报告的「标准缓动曲线」情况。
我的数据是否私密？
是的。所有操作 —— 构建CSS字符串和绘制SVG预览 —— 都完全在您的浏览器中运行。没有任何内容被上传或记录。