Tidadigi Logo

CSS cubic-bezier() Function

Hàm CSS cubic-bezier() là một hàm dựng sẵn để định nghĩa đường cong Cubic Bezier.
Đường cong Bezier là đường cong toán học trong ứng dụng đồ họa hai chiều như Adobe Illustrator. Đường cong này được xác định bởi bốn điểm: vị trí đầu và cuối P0, P3 (neo). Hai điểm giữa riêng biệt P1 và P2 (tay điều khiển) được dùng trong ví dụ của chúng ta. Đường cong Bezier thường được dùng trong đồ họa máy tính, hoạt hình và mô hình hóa.

Cú pháp: 

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

Tham số: Hàm này chấp nhận bốn tham số bắt buộc là giá trị số. Giá trị của x1 và x2 nằm trong khoảng từ 0 đến 1.

Ví dụ: Chương trình dưới đây minh họa hàm cubic-bezier() trong CSS:

html 
<!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>

Đầu ra: 

css-cubic-bezier-function

Trình duyệt được hỗ trợ:

  • Google Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

Last Updated : 21/07/2025