CSS缓动函数试玩场 - 所有预设一览
并列播放所有CSS内置缓动函数(ease, linear等)的动画效果,方便对比选择。
UD5工具箱
贝塞尔缓动函数是CSS中用于控制动画速度变化的三次贝塞尔曲线。它由4个点定义:固定起点(0,0)和终点(1,1),以及两个可调控制点P1(x₁,y₁)和P2(x₂,y₂)。曲线描述动画进度随时间的变化关系——横轴代表时间进度(0→1),纵轴代表动画进度(0→1)。
语法:cubic-bezier(x1, y1, x2, y2)。x1和y1是第一个控制点P1的坐标,x2和y2是第二个控制点P2的坐标。x1和x2必须在[0,1]范围内,确保曲线在时间上是单调的。y1和y2可以超出[0,1]范围,产生"超出"或"回弹"的视觉效果(虽然这不是真正的物理弹跳)。
直接在transition-timing-function或animation-timing-function中使用:transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
也可以用于@keyframes中每个关键帧的animation-timing-function。
ease (默认): 缓入缓出,先加速后减速 — cubic-bezier(0.25, 0.1, 0.25, 1)
ease-in: 缓慢开始,加速结束 — cubic-bezier(0.42, 0, 1, 1)
ease-out: 快速开始,缓慢结束 — cubic-bezier(0, 0, 0.58, 1)
ease-in-out: 两端缓慢,中间加速 — cubic-bezier(0.42, 0, 0.58, 1)
linear: 匀速 — cubic-bezier(0, 0, 1, 1)
当y₁或y₂超出[0,1]时,动画会在到达终点前"过冲"或"回退"。例如cubic-bezier(0.68, -0.55, 0.27, 1.55)会产生类似弹簧的效果。这在CSS中完全合法,可用于创造更生动的动画。但需谨慎使用,过度回弹可能让用户感到不适。
本工具提供JS缓动函数导出。核心原理:通过采样贝塞尔曲线建立查找表,对于任意时间进度t∈[0,1],在查找表中找到对应的缓动值。使用requestAnimationFrame配合缓动函数即可实现自定义动画。也可使用Web Animations API的effect.updateTiming()动态设置。
并列播放所有CSS内置缓动函数(ease, linear等)的动画效果,方便对比选择。
设定物理页框数,输入页引用串,动画展示不同页面置换算法的缺页率。
调节光源角度、颜色和距离,生成凹凸柔和的新拟态UI元素CSS盒阴影代码,潮流设计工具。
展示几组在各类色盲下仍可区分的定性数据配色方案,含Hex码。
加载Lottie动画JSON文件,播放并控制速度、方向,预览动效效果。
在页面上叠加可拖拽的半透明网格线,辅助网格布局对齐。
可视化Flexbox容器和子项的所有属性及选项,鼠标悬停预览效果。
编写Brainfuck代码,以可视化的方式步进执行,观察活动纸带和指针。
选择触发位置、箭头方向与样式,生成轻量悬停提示框代码。
为页面上使用CSS Grid的元素显示网格线和名称,辅助布局开发和调试。
粘贴PHP print_r或var_export输出,智能解析为有效的JSON。
上传精灵图,自动切片检测或手动框选获取背景定位数值,生成CSS Sprite代码。
通过滑块和开关调整 Flex 容器和子项的所有 CSS 属性,实时观察布局变化,理解弹性盒子。
列出所有标准 CSS 光标值(pointer, grab, zoom-in 等),鼠标悬停实时查看对应光标样式并复制代码。
通过加权Voronoi点算法将图片转换为类似针笔画的黑白点描艺术效果。
为图片添加类似胶片漏光的红黄色调渐变或光晕效果,营造怀旧氛围。
上传 webpack 的 stats.json,生成交互式树状图、模块大小排名,辅助优化构建体积。
在Oklch色彩空间中生成均匀色阶、类比色和互补色方案,确保视觉一致性。
将URL查询字符串转换为键值对对象,编辑并重新生成编码后的查询参数,支持多层嵌套。
粘贴JSON对象,生成可折叠的树形视图,点击节点复制其键值路径,方便调试。
浏览并一键复制常见CSS动画(跳动、淡入、滑动等)的@keyframes代码。
在二维函数曲面上动态展示梯度下降算法的迭代过程,可调节学习率和初始点。
拖拽调节Flex容器和子项属性,即时可视化响应效果,同时显示CSS代码,边学边用。
将 JSON 数组或对象渲染为可交互的 HTML 表格,支持嵌套展开、列排序和搜索。
输入文本,滑块调节letter-spacing和word-spacing,实时显示效果并复制CSS。
绘制或生成迷宫墙,选择DFS或BFS算法自动寻找出口,动画展示探索过程。
在线生成可折叠的手风琴面板,自定义标题、内容与图标,支持纯CSS或简单JS切换。
粘贴带参数的URL,以表格形式列出所有Query参数与值。
创建带有向下箭头和自定选项风格的自定义选择框HTML+CSS代码。
在NEON(Nette框架)和YAML格式之间转换配置文件,保持结构。