颜色选择器
选择并提取 HEX、RGB、HSL 颜色值
拖动控制点编辑 cubic-bezier 曲线,复制缓动代码
拖动两个控制点编辑缓动曲线,旁边用匀速运动做对照,能直观看出「快起慢停」这类差别。曲线直接输出为 cubic-bezier()。
横轴是进度、纵轴是位移;编辑区纵轴特意留到 −0.5 ~ 1.5,因为「回弹」类曲线的控制点本来就在 0–1 之外(默认这组是 0.34, 1.56, 0.64, 1)。
横轴被限制在 0–1:CSS 规范要求两个控制点的 x 落在 [0,1],越界整条曲线作废;纵轴越界是合法的,正是预备与回弹效果的来源。
右侧有与线性运动的对照演示,可以直接看出缓动在哪些时间点加速、哪些点减速;输出是 `transition-timing-function: cubic-bezier(...)`。
拖控制点或选预设
七个预设(linear / ease / ease-in / ease-out / ease-in-out / back-out / expo-out)就是常见的几组点,拖完仍然可以接着微调。
和线性对照
同时看两个方块的位移差,减速段越长、越"缓"。
调时长并复制
时长只是演示用的,复制出去的是曲线函数本身——把它用到你的 transition 上即可。
CSS 规定 cubic-bezier 两个控制点的 x 必须在 [0,1],超出范围整条曲线无效(浏览器会退回默认)。纵轴则允许越界,超过 1 是冲过头(overshoot)、低于 0 是先反向(anticipation)——回弹效果就是这么来的。
是。`ease` 就是 cubic-bezier(0.25, 0.1, 0.25, 1),`linear` 是 (0, 0, 1, 1),`ease-in` 是 (0.42, 0, 1, 1)。预设只是给这些点起了名字,复制出来的都是同一种函数,浏览器按同一条曲线插值。
选择并提取 HEX、RGB、HSL 颜色值
检查前背景色对比是否符合的可访问性标准
可视化创建漂亮的 CSS 线性或径向渐变
可视化调节并复制 box-shadow 代码
各领域物理单位的精准换算
在 B, KB, MB, GB, TB 间进行转换
可视化调节四角圆角并复制 border-radius 代码
拖动顶点调整形状,复制 clip-path: polygon() 代码