返回工具合集

CSS贝塞尔缓动曲线生成器

拖拽控制点可视化编辑 cubic-bezier 贝塞尔曲线,实时预览动画过渡效果,复制CSS缓动函数代码,用于网页transition和animation动效开发

曲线编辑器面板

预设曲线

动画预览

生成CSS代码

transition-timing-function: cubic-bezier(0.32, 0.78, 0.80, 0.22); animation-timing-function: cubic-bezier(0.32, 0.78, 0.80, 0.22);
linear
ease
当前自定义曲线
工具使用说明

1. 拖拽控制点自定义贝塞尔曲线

画布内两个控制点可以直接拖动调整曲线形态,也可以在下方输入框手动填写x1 y1 x2 y2数值,实时修改缓动函数形态。

2. 预设常用CSS缓动曲线一键加载

内置linear、ease、ease-in、ease-out、ease-in-out、back回弹、cubic立方缓动等前端开发常用预设缓动曲线,点击直接切换。

3. 实时预览动画过渡效果

点击播放动画按钮,预览小球按照当前贝塞尔曲线运动,同时对比linear、ease和自定义曲线三者的动画差异,直观感受动效节奏。

4. 一键复制cubic-bezier代码

工具自动生成transition-timing-function和animation-timing-function两行标准CSS代码,直接复制粘贴到样式表、内联样式、前端组件使用。

5. 分享曲线参数链接,参数保存在URL哈希

复制分享链接发给同事,打开链接会自动加载当前贝塞尔控制点,方便团队协同调试网页动画、按钮hover、卡片入场退场动效。

6. 浏览器本地运算,不上传数据

全部曲线计算、动画预览都在本地浏览器完成,不会上传任何参数,适合前端页面动效、小程序动画、H5交互动画的缓动调试。

操作完成