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交互动画的缓动调试。
© 2026 小丫设计工具站 版权所有
皖ICP备2026013248号-4
本站工具仅供学习使用,请勿用于商业侵权用途
皖ICP备2026013248号-4
本站工具仅供学习使用,请勿用于商业侵权用途