📈 一个工具箱,
完成所有设计任务

贝塞尔缓动生成器

设计自定义 CSS 缓动曲线,实时预览动画效果。拖动控制点、选择预设,一键复制 cubic-bezier() 函数。

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

📈 贝塞尔缓动生成器

贝塞尔缓动指南

cubic-bezier() 是定义动画加速与减速方式的 CSS 时间函数。它的四个值——x1, y1, x2, y2——是将时间映射到进度的曲线的两个控制点。X 轴代表时间(0 到 1),Y 轴代表动画进度。

选择预设或在画布上拖动橙色控制点来塑造缓动曲线。动画小球精确展示时间手感,CSS 输出可直接粘贴到任何 transition 或 animation。

专业提示

常见问题

Q: CSS 中的 cubic-bezier 是什么?
CSS 中的 cubic-bezier 是什么?它是 transition 和 animation 中使用的时间函数,定义速度曲线:动画随时间推进的快慢。默认值是 cubic-bezier(0.25, 0.1, 0.25, 1),也叫 ease。
Q: 标准缓动值有哪些?
标准缓动值有哪些?ease = (0.25, 0.1, 0.25, 1),ease-in = (0.42, 0, 1, 1),ease-out = (0, 0, 0.58, 1),ease-in-out = (0.42, 0, 0.58, 1),linear = (0, 0, 1, 1)。
Q: 如何创建弹跳效果?
如何创建弹跳效果?让 Y 值超过 1,如 cubic-bezier(0.34, 1.56, 0.64, 1)。曲线短暂超过目标后回落——弹簧般的弹跳。
Q: 为什么负 Y 值时动画看起来坏了?
为什么负 Y 值时动画看起来坏了?负 Y 创造预备动作(anticipation)——元素在前进前先后退。对 back-easing 效果这是有意为之,但在大多数内容过渡中显得不对。
Q: cubic-bezier 能用在动画里吗?
cubic-bezier 能用在动画里吗?能,transition 和 @keyframes 动画都可以,通过 timing-function 属性。也适用于滚动联动动画。

中国传统色

中国传统色源自「五色观」——青、赤、黄、白、黑,对应五行、方位与季节。古人从矿物与植物中提炼颜料,形成了数百种富有诗意的色名。这些色彩被广泛用于宫廷服饰、建筑彩绘与书画创作,至今仍是设计师的灵感源泉。

胭脂 #9D2933

古代妆饰与衣料的经典红色,由胭脂虫或红花制成

朱砂 #FF461F

矿物颜料,故宫红墙与印章的常用色

黛蓝 #425066

古代女子画眉之色,沉稳内敛

竹青 #789262

竹叶之色,文人雅士钟爱的清雅色调

月白 #D6ECF0

月光般的淡蓝色,明清宫廷常服用色

藤黄 #FFB61E

取自藤本植物汁液,国画重要黄色颜料

藕荷 #E4C6D0

藕色与荷色的结合,温婉柔美

秋香 #D9B611

秋日桂花的黄绿色,明代流行色

石绿 #16A951

矿物孔雀石研磨而成,山水画中的绿色

墨色 #50616D

书法用墨的深灰蓝色,文房四宝之色

Q: 什么是中国传统色?
什么是中国传统色?中国传统色源自「五色观」——青、赤、黄、白、黑对应五行与方位。古人从朱砂、藤黄、石绿等矿物植物中提取颜料,形成了数百种如「月白」「黛蓝」般富有诗意的色名。
Q: 中国红是什么色值?
中国红是什么色值?中国红属于朱砂色系,常用色值 #FF461F(朱红)或 #9D2933(胭脂)。故宫红墙更接近深红色 #A61B29。