CSS 贝塞尔曲线生成器
可视化创建 CSS 动画缓动曲线。 拖动控制手柄并实时预览动画效果。
预设
曲线编辑器
P1(0.25, 0.10)
P2(0.25, 1.00)
预览
持续时间
1.0s
输出
cubic-bezier(0.25, 0.10, 0.25, 1.00)
transition: all 1.0s cubic-bezier(0.25, 0.10, 0.25, 1.00);
分享此工具
📖
使用方法
Step 1
调整曲线
拖动贝塞尔曲线控制手柄
→
Step 2
预览
通过动画预览检查效果
→
Step 3
复制
复制 CSS 代码使用
✨
功能特点
拖拽控制
拖动控制点调整曲线
预设
ease、ease-in、ease-out 等预设
动画预览
通过实时动画预览缓动效果
❓
FAQ
定义动画加速模式的缓动函数。
🔗相关工具
🎨
设计工具颜色代码转换器
在 HEX、RGB 和 HSL 颜色代码之间转换。 使用取色器和实时预览直观选择颜色。
🎨
设计工具取色器
使用色轮和滑块直观选择颜色。 获取并复制 HEX、RGB 和 HSL 格式的颜色代码。
🎨
设计工具图片颜色提取器
自动检测图片中的主色调并生成色板。 还可以点击图片任意位置提取单个颜色。
🎯
设计工具图片平均色提取器
计算整张图片或选定区域的平均颜色。 适用于配色方案选择或缩略图背景色。
🌈
设计工具CSS 渐变生成器
通过拖拽控制可视化创建 CSS 渐变。 支持线性、径向和锥形渐变类型，带预设。
🔲
设计工具CSS 阴影生成器
通过滑块可视化创建 CSS box-shadow。 支持多重阴影和内阴影。