📜  CSS cubic-bezier()函数

📅  最后修改于: 2020-11-05 02:13:59             🧑  作者: Mango

CSS cube-bezier()函数

它是CSS中的内置函数,用于定义三次Bezier曲线。贝塞尔曲线是在2D图形应用程序(如墨水空间,adobe illustrator等)中使用的数学定义的曲线。此CSS函数是过渡时间函数,用于平滑和自定义过渡。

它由四个点(即P0,P1,P2和P3)定义。点P0和P3(称为锚点)是起点和终点,点P1和P2(称为手柄)是中间点。

对于CSS Bezier曲线,点P0和P3始终位于同一位置。 P0在(0,0)处代表初始状态和初始时间,而P3在(1,1)处代表初始状态和最终时间。这意味着传递给cubic-bezier()函数的参数只能在0和1之间。

句法

cubic-bezier( x1, y1, x2, y2 )

此CSS函数接受四个必填数字值。 x1和x2的值必须介于0和1之间,否则该值将无效。如果我们传递的参数不在此间隔内,则函数将设置为其默认值,即线性过渡,其值为cubic-bezier(0,0,1,1)。

通过使用以下插图,我们可以了解此CSS函数。

此函数可以与动画定时功能和过渡定时功能属性一起使用。

在这里,我们正在使用transition-timing-function属性。




 cubic-bezier() function 



The cubic-bezier() Function

Move your mouse over the below div element, to see the transition effect.

输出量