開發者免費本機執行
三次貝茲曲線編輯器
直觀地設計 CSS 三次貝茲曲線緩動——拖動控制點、預覽動作、複製 CSS。
CSS
cubic-bezier(0.25, 0.1, 0.25, 1)預覽
預設
拖動綠色手柄或使用滑塊調整曲線。
關於三次貝茲曲線編輯器
Handytool 的三次貝茲曲線編輯器讓您以預期的方式設計 CSS 緩動曲線——通過拖動兩個控制點直到動作感覺正確。從熟悉的預設（ease、linear、ease-in-out）開始並從那裡調整，或自由移動控制點以建立您自己的。伴隨的球動畫以您選擇的持續時間播放曲線，所以您可以在貼上 cubic-bezier(...) 到您的過渡之前感受計時。
三次貝茲曲線編輯器功能
- 01
拖動曲線、看到動作
兩個可拖動的控制點控制貝茲曲線的開始和結束。伴隨的球動畫在您選擇的持續時間播放曲線，所以您可以在離開頁面前預覽超衝和緩出感。
- 02
所有標準預設
從 CSS 的內置 ease、linear、ease-in、ease-out 和 ease-in-out 開始——然後調整。移動控制點時預設自動切換回 "custom"。
- 03
一鍵複製 CSS
cubic-bezier() 值以兩位小數精度即時更新，可直接放入 transition-timing-function 或 animation-timing-function。
三次貝茲曲線編輯器常見問題
- 為什麼 Y 值可以超過 1 或低於 0？
- 範圍外的貝茲曲線控制點產生超衝和欠衝效果——曲線在定居前超過其端點。這就是 "彈性" 緩動曲線的製作方式；X 軸仍必須保持在 0–1 中。
- 我如何使用輸出？
- 複製 cubic-bezier(...) 字串並將其貼到任何 CSS transition-timing-function 或 animation-timing-function 值中。它在每個現代瀏覽器中都有效。
- 預覽對 CSS 的精確性如何？
- 是的——預覽使用與瀏覽器對過渡使用的相同三次貝茲曲線公式來製作球從 0 到 100% 的動畫。持續時間滑桿讓您在提交之前感受慢速與快速曲線。
- ease-in-out 實際上意味著什麼？
- Ease-in-out 開始緩慢，在中間加速，然後再次在結束時減速——cubic-bezier(0.42, 0, 0.58, 1) 曲線。它是大多數精美 UI 動作的預設選擇，因為它反映了實體物體加速和減速的方式。