CSS Cubic-bezier() 函数

它是 CSS 中的一个内置函数，用于定义三次贝塞尔曲线。贝塞尔曲线是一种数学定义的曲线，用于 2D 图形应用程序，例如（Inkspace、Adobe Illustrator 等）。这个 CSS 函数是过渡时间函数，用于平滑和自定义过渡。

它由四个点定义（即 P0、P1、P2 和 P3）。P0 和 P3（称为锚点）是起点和终点，P1 和 P2（称为控制点）是中间点。

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

语法

以下语法用于了解 cubic-bezier() 方法。

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

我们可以通过以下图示来理解这个 CSS 函数。

示例

该示例使用 CSS 属性展示了 cubic-bezier 函数及其对不同元素的值。

示例 1

此函数可与 animation-timing-function 和 transition-timing-function 属性一起使用。

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

输出

示例 2

CSS 在导航栏标签的按钮上使用 cubic-bezier 函数。它用于使用所需值通过函数显示过渡。我们可以使用圆形从左下角移动到右上方。

输出

输出显示了按钮的 cubic Bezier 函数。

示例 3

该示例展示了 CSS 中 cubic-bezier 函数的线性过渡。我们可以看到 cubic-bezier() 在过渡轴值上的无限值。多个按钮通过悬停在函数上展示了动画和过渡效果。

输出

输出显示了容器的 cubic Bezier 函数。

示例 4

该示例展示了 cubic-bezier 函数的多个容器和元素。我们可以将鼠标悬停在容器上，函数就会通过 CSS 函数起作用。

输出

输出显示了容器的 cubic Bezier 函数。

示例 5

多个 div 标签使用带内联样式表的 Bezier 函数。我们可以在 cubic Bezier 属性中使用不同的过渡值。

输出

输出显示了容器的 cubic Bezier 函数。

示例 6

文本显示了文本的阴影，使用了过渡属性。过渡属性使用 cubic Bezier 函数及其所需的值。

输出

输出显示了容器的 cubic Bezier 函数。

示例 7

该示例展示了带有 emoji 动画的基本 CSS cubic-bezier() 函数。我们可以看到 emoji 并添加 cubic Bezier 函数的过渡。

输出

输出显示了容器的 cubic Bezier 函数。

结论

CSS cubic-bezier() 函数用于为 HTML 函数实现过渡和动画。我们可以利用按钮、div 标签、emoji 函数和其他 HTML 元素。它帮助开发人员创建有吸引力、动画且引人注目的网页。