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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。