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()函数：

程序：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>cubic-bezier function</title> 
        <style>  
            .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; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "gfg">GeeksforGeeks</div> 
        <h1>The cubic-bezier() Function</h1> 
        <div class = "geeks"></div> 
    </body> 
</html>

输出：

相关用法

注：本文由纯净天空筛选整理自Mahadev99大神的英文原创作品 CSS | cubic-bezier() Function。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。