css教學

使用CSS做貝塞爾曲線

一个新手

Oct 08, 2017 am 09:32 AM

css

前言

在了解cubic-bezier 之前，你需要對CSS3 中的動畫效果有所認識，它是animation-timing-function 和transition-timing-function 中一個重要的內容。

本體

簡介

cubic-bezier 又稱三次貝塞爾，主要為animation 產生速度曲線的函數，規定是cubic-bezier(<x1>, <y1>, <x2>, <y2>)</y2></x2></y1></x1>。

我們可以從下圖簡單理解一下cubic-bezier：

從上圖我們需要知道的是cubic-bezier 的取值範圍:

P0：預設值(0, 0)
#P1：動態取值(x1, y1)
P2：動態取值(x2, y2)
P3：預設值(1, 1 )

我們需要關注的是P1 和P2 兩點的取值，而其中X 軸的取值範圍是0 到1，當取值超出範圍時cubic-bezier 將失效；Y 軸的取值沒有規定，當然也毋須過大。

最直接的理解是，將以一條直線放在範圍只有1 的座標軸中，並從中間拿出兩個點來拉扯（X 軸的取值區間是[0, 1]，Y 軸任意），最後形成的曲線是動畫的速度曲線。

使用

在測試範例中：

<!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;
           -o-transition:  all 2s;
              transition:  all 2s;
    }
    .animation:hover {
      -webkit-transform:  translateX(100px);
          -ms-transform:  translateX(100px);
           -o-transform:  translateX(100px);
              transform:  translateX(100px);
    }
  </style>
</head>
<body>
  <p class="animation"></p>
</body>
</html>

我們可以在瀏覽器中看到，當滑鼠移到元素上時，元素開始向右移動，開始比較慢，之後則比較快，移開時按原曲線回到原點。

在例子中，當我們不為transition 添加cubic-bezier 或是其他timing-function 時，預設的速度曲線是ease，此時的速度曲線是：

那麼讓我們在程式碼中加入cubic-bezier(.17, .86, .73, .14)：

....animation {
  ...  -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);
}
...

再刷新頁面觀察效果，會看到動畫在執行過程中有一段很緩慢的移動，前後的速度相似，此時的運動曲線是：

幾個常用的固定值對應的`cubic-bezier` 值以及速度曲線

ease：cubic-bezier(.25, .1, .25, 1)
liner：cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0)
ease-in：cubic-bezier(.42, 0, 1, 1)
ease-out：cubic-bezier(0, 0, .58, 1)
ease-in-out：cubic-bezier(.42, 0, .58, 1)
In Out . Back（来回的缓冲效果）：cubic-bezier(0.68, -0.55, 0.27, 1.55)

以上是使用CSS做貝塞爾曲線的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Draggin＆＃039;和droppin＆＃039;在反應中Apr 17, 2025 am 11:52 AM

React生態系統為我們提供了許多庫，所有庫都集中在拖放的相互作用上。我們有反應，反應，可愛dnd，

快速軟件Apr 17, 2025 am 11:49 AM

最近有一些關於快速軟件的完美互連的事情。

帶有背景折疊的嵌套梯度Apr 17, 2025 am 11:47 AM

我可以說我經常使用背景折疊。 IT Wager IT幾乎從未在日常CSS工作中使用。但是在斯特凡·朱迪斯（Stefan Judis）的帖子中，我想起了它，

使用React Hooks使用requestAnimationFrameApr 17, 2025 am 11:46 AM

使用RequestAnimationFrame進行動畫化應該很容易，但是如果您還沒有徹底閱讀React的文檔，那麼您可能會遇到一些事情

需要滾動到頁面頂部嗎？Apr 17, 2025 am 11:45 AM

向用戶提供此鏈接的最簡單方法是針對元素上的ID的鏈接。如此...

最好的（GraphQl）API是您編寫的APIApr 17, 2025 am 11:36 AM

聽著，我不是GraphQL專家，但我確實喜歡與之合作。作為前端開發人員，它向我曝光數據的方式非常酷。它就像一個菜單

每周平台新聞：文本間距書籤，頂級等待，新放大器加載指示器Apr 17, 2025 am 11:26 AM

在本週的綜述中

在保留邊框半徑的同時，擴展盒子的各種方法Apr 17, 2025 am 11:19 AM

我最近注意到Codepen的一個有趣的更改：在懸停在主頁上的筆時，有一個矩形，圓角在後面擴展。

See all articles

熱AI工具

熱工具

mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），