CSS Cubic-Bezier 曲线生成器
用于 `cubic-bezier(x1, y1, x2, y2)` CSS 时序函数的交互式编辑器。拖动曲线上的两个控制点，或直接输入坐标。Y 值可超出 [0, 1] 以实现 overshoot 或 anticipation 效果。预览块按所选时长在你的曲线下来回动画，可亲身感受运动。预设覆盖 CSS 命名关键字（ease、ease-in/out）与常用自定义曲线。
—
预设
预览动画
CSS
transition-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);搭配 transition-timing-function 或 animation-timing-function 使用。
使用方法
- 拖动蓝色与红色把手塑造曲线。
- 或选预设（ease、ease-in-out、overshoot…）。
- 点 Play 在选定时长下感受运动，再复制 CSS。
常见问题
- 为什么 Y 可以 > 1 或 < 0？
- overshoot（回弹）与 anticipation（蓄势）效果需要 Y 跳出 [0, 1]。CSS 允许——动画值可在落定前短暂越过目标。
- X 呢？
- CSS 要求 X1、X2 在 [0, 1] 内，使曲线是时间的函数。滑块对 X 做钳制，对 Y 放开以支持 overshoot。
- 与弹簧物理的区别？
- Cubic-bezier 是固定时间上的确定性曲线；弹簧（`linear(...)` 或 JS）是真实物理模型——模型不同，简单场景下感觉相近。
- 在 CSS 哪里用？
- `transition-timing-function: cubic-bezier(...)` 用于过渡；`animation-timing-function:` 用于关键帧。Tailwind：`ease-[cubic-bezier(...)]`。
相关工具
CSS 动画生成器
可视化构建 CSS 动画 — 选预设、调时间/缓动/次数、看预览、复制 keyframes。
开发 0 0
CSS 渐变生成器
用多色停靠点设计线性或径向 CSS 渐变并复制代码。
颜色 0 0
CSS Box Shadow 生成器
可视化设计 CSS box-shadow——多图层、实时预览、CSS / Tailwind 代码一键复制。
颜色 0 0
CSS 滤镜演练场
可视化组合 blur、brightness、contrast、hue、sepia、invert 等 9 项——复制 CSS 滤镜或 Tailwind 任意值。
颜色 0 0
Border Radius 生成器
独立拖拽四角、尝试椭圆半径、复制 CSS——内置 chat-bubble、pill、blob、tab 等预设。
颜色 0 0
CSS 三角形生成器
用 border 或 clip-path 生成 8 方向纯 CSS 三角形——复制规则即可用。
颜色 0 0