CLS 手动计算器 - 模拟布局偏移分数
输入移动距离和视口尺寸,手动模拟单个布局偏移的分数计算方式,加深对 CLS 的理解。
UD5工具箱
手动调整 ARIMA(p, d, q) 参数,实时观察模型拟合与预测趋势变化
输入移动距离和视口尺寸,手动模拟单个布局偏移的分数计算方式,加深对 CLS 的理解。
绑定动画进度到滚动位置,交互式调整参数,直观理解scroll-timeline和view-timeline。
创建并运行动画工作线程,展示不受主线程影响的平滑动画效果。
构建 Promise 链并显示每个 then/catch 的执行时间与状态,帮助理解微任务调度。
展示几组在各类色盲下仍可区分的定性数据配色方案,含Hex码。
拖拽两控制点精细微调CSS `cubic-bezier()` 曲线并对比预设函数效果。
在开发环境中模拟 periodicSync 事件,触发后查看 SW 中的处理逻辑和网络请求。
动画展示 Kruskal 算法选择边和合并集合的过程,高亮生成树边。
一款漂亮的拟物指针时钟,同时显示数字时间和日历,适合常驻副屏或全屏。
输入网址,尝试拉取该站favicon并提取其主要颜色,用于品牌配色参考。
可视化选择操作(访问、点击、断言等),自动生成 Cypress 测试代码。
可视化Flexbox容器和子项的所有属性及选项,鼠标悬停预览效果。
编写Brainfuck代码,以可视化的方式步进执行,观察活动纸带和指针。
使用新的迭代器辅助方法链式处理数据,查看懒求值效果。
输入一个多参数函数,自动生成柯里化版本并演示逐步传参调用的过程。
监测页面加载过程中的布局偏移,定时截图并合成 GIF,直观展示视觉稳定性问题。
编写带有伪类的选择器,实时高亮匹配的HTML元素,探索现代CSS选择器的能力。
随机可视化Skip List的层级结构和快速查找过程,对比链表效率。
并列播放所有CSS内置缓动函数(ease, linear等)的动画效果,方便对比选择。
拖拽基色指针,自动计算互补、近似、三等分等七种和谐配色方案,复制十六进制值。
粘贴带参数的URL,以表格形式列出所有Query参数与值。
从一个基色或图片提取的颜色,自动生成 50-950 的色阶并导出为 Tailwind CSS 配置。
编写正则表达式,在文本中用不同颜色高亮整个匹配和每个捕获组。
上传精灵图,自动切片检测或手动框选获取背景定位数值,生成CSS Sprite代码。
输入 URL,通过前端代理或 CORS 配置获取并显示完整的响应头信息。
载入简单控制网格,执行 Catmull-Clark 细分一次,观察光滑效果。
在二维函数曲面上动态展示梯度下降算法的迭代过程,可调节学习率和初始点。
使用 :has() 伪类编写规则,实时查看父元素如何根据子元素状态改变自身样式。
加载Lottie动画JSON文件,播放并控制速度、方向,预览动效效果。
随机生成两到五种颜色的组合,附带预览色块,提供设计意外之喜。