使用CSS做貝塞爾曲線
前言
在了解cubic-bezier 之前，你需要對CSS3 中的動畫效果有所認識，它是animation-timing-function 和transition-timing-function 中一個重要的內容。
本體
簡介
cubic-bezier 又稱三次貝塞爾，主要為animation 產生速度曲線的函數，規定是cubic-bezier(<x1>, <y1>, <x2>, <y2>)。
我們可以從下圖簡單理解一下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 值以及速度曲線
- ##
以上是使用CSS做貝塞爾曲線的詳細內容。更多資訊請關注PHP中文網其他相關文章！
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)
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
vue中怎麼用bootstrap
Apr 07, 2025 pm 11:33 PM
在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。
了解HTML，CSS和JavaScript：初學者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
HTML，CSS和JavaScript的角色：核心職責
Apr 08, 2025 pm 07:05 PM
HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。
bootstrap怎麼插入圖片
Apr 07, 2025 pm 03:30 PM
在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。
bootstrap怎麼寫分割線
Apr 07, 2025 pm 03:12 PM
創建 Bootstrap 分割線有兩種方法：使用 標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。
bootstrap怎麼設置框架
Apr 07, 2025 pm 03:27 PM
要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。
bootstrap按鈕怎麼用
Apr 07, 2025 pm 03:09 PM
如何使用 Bootstrap 按鈕？引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本
bootstrap怎麼調整大小
Apr 07, 2025 pm 03:18 PM
要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-
