css bezier的四个值,CSS cubic-bezier()用法及代码示例

cubic-bezier()函数是CSS中的内置函数，用于定义三次Bezier曲线。

贝塞尔曲线是在数学图形定义的曲线中使用的二维图形应用程序，如居家插画，墨迹等，该曲线由四个点定义：初始位置和终止位置，分别为P0和P3(分别称为“anchors”)和两个在我们的示例中，中间点即P1和P2(称为“handles”)是分开的。贝塞尔曲线经常用于计算机图形学，动画，建模等。

用法:

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

参数：该函数接受四个必填参数。它包含一个数值，并且x1和x2的值介于0到1之间。

以下示例程序旨在说明CSS中的cubic-bezier()函数：

程序：

cubic-bezier function

.geeks {

width:150px;

height:80px;

background:green;

transition:width 5s;

transition-timing-function:cubic-bezier(0.3, 0.7, 1.0, 0.1);

}

div:hover {

width:300px;

}

.gfg {

font-size:40px;

font-weight:bold;

color:green;

text-align:center;

}

h1 {

text-align:center;

}

GeeksforGeeks

The cubic-bezier() Function

输出：