您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

Cubic-bezier 曲线

时间：02-20来源：作者：点击数：12

cubic-bezier又称三次贝塞尔，主要是为animation生成速度曲线函数。

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

此图中:

P0:(0,0) P1:(x1,y1) P2:(x2,y2) P3:(1,1)

（x1,x2 范围为 0-1）（y1,y2没规定，但是过大没必要也没意义。）

我对此曲线是这么理解的：假设P1，P2两个点为吸铁石，曲线是薄铁条（可以被吸铁石影响形状的那种）

那么这个曲线则是被 P1，P2两个吸铁石点拉扯形成的。

有一点需要注意，当这个点距离曲线越远，则拉扯力越大，曲线弧度越大。距离曲线越近，拉扯力越小，曲线弧度越小（这里和吸铁石相反。）

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style>
    .animation {
      width: 50px;
      height: 50px;
      background-color: #ed3;
      -webkit-transition:  all 2s cubic-bezier(.17, .86, .73, .14);
           -o-transition:  all 2s cubic-bezier(.17, .86, .73, .14);
              transition:  all 2s cubic-bezier(.17, .86, .73, .14);
    }
    .animation:hover {
      -webkit-transform:  translateX(400px);
          -ms-transform:  translateX(400px);
           -o-transform:  translateX(400px);
              transform:  translateX(400px);
    }
  </style>
</head>
<body>
  <div class="animation"></div>
</body>
</html>