§ ITPOW >> 文档 >> CSS

CSS 3 动画问答-贝塞尔曲线 cubic-bezier

作者:vkvi 来源:ITPOW(原创) 日期:2021-8-23

如果看网上参考资料,会发现,cubic-bezier 有 4 个参数,这 4 个参数的含义是 n、n、n、n,这命名,也太差了吧。

其实应该是:cubic-bezier(x1, y1, x2, y2),对应 2 个点的坐标,这 2 个点如下,只要一看图就明白了。

贝塞尔曲线 cubic-bezier

这个我们可以在浏览器 F12 中去调试生成我们想要的效果的。cubic-bezier 通过合适的参数值,是可以代替 ease、ease-in、ease-out 等的。

网上说,这 4 个参数值是 0 到 1,但实际上只有 x 是 0 到 1,y 是可以大于 1、小于 0 的。

cubic-bezier 还有一个很棒的效果,是可以制造回弹效果,就像弹珠掉地上弹几下这种。

相关文章