吸顶导航栏生成器 - 滚动固定顶部CSS

生成使用position:sticky固定在顶部的导航栏代码，含滚动变色等增强效果。

前端设计 CSS 吸顶 导航

内存分页替换模拟 - FIFO/LRU/OPT动画

设定物理页框数，输入页引用串，动画展示不同页面置换算法的缺页率。

教育工具 分页 模拟 算法

骨架屏代码生成器 - 加载占位灰色块

为内容区域生成灰色闪烁的骨架屏占位代码，包含卡片、标题等组件样式。

前端设计 CSS 生成 骨架屏

面包屑导航生成器 - Schema+HTML

可视化添加层级，生成带结构化数据的面包屑导航HTML/CSS代码。

前端设计 SEO 导航 面包屑

热门

悬停提示框生成器 - 纯CSS/JS气泡样式定制

选择触发位置、箭头方向与样式，生成轻量悬停提示框代码。

开发工具 CSS tooltip 提示框 生成

面包屑导航生成器 - HTML+CSS直接输出

添加层级名称与链接，自动生成带Schema结构化的面包屑导航条。

SEO 导航 生成 结构化 面包屑

Catmull-Clark 细分曲面演示 - 控制网格迭代

载入简单控制网格，执行 Catmull-Clark 细分一次，观察光滑效果。

图形学 Catmull-Clark 图形学 曲面 细分

调色板导出为 Tailwind 配置 - 从图片/手动生成色阶

从一个基色或图片提取的颜色，自动生成 50-950 的色阶并导出为 Tailwind CSS 配置。

CSS Tailwind 导出 调色板 配置

热门

Webpack 打包分析器 - stats.json 可视化

上传 webpack 的 stats.json，生成交互式树状图、模块大小排名，辅助优化构建体积。

开发工具 Webpack 体积 打包分析 模块

最新

Iterator Helpers 演示 - map/filter/take 在迭代器上的应用

使用新的迭代器辅助方法链式处理数据，查看懒求值效果。

JavaScript Helpers Iterator 演示 迭代器

最新

Cypress 测试场景构建器 - 点选生成测试代码

可视化选择操作（访问、点击、断言等），自动生成 Cypress 测试代码。

开发工具 Cypress 场景 构建器 测试

滚动驱动动画生成器 - Scroll-timeline代码

配置基于滚动位置触发的CSS @scroll-timeline动画，复制适配代码。

前端设计 CSS 动画 滚动

Cookie 同意条生成 - 纯代码无样式嵌入

勾选需要展示的选项（接受/拒绝/设置），生成纯净HTML/JS代码，自行套用样式。

合规 Cookie 代码 合规 同意

滚动吸附生成器 - 全屏滚动页面模板

配置多屏垂直或水平滑动卡片，生成带CSS Scroll Snap的HTML页面代码。

前端设计 CSS 模板 滚动吸附

热门

手风琴组件生成器 - 折叠面板HTML/CSS代码

在线生成可折叠的手风琴面板，自定义标题、内容与图标，支持纯CSS或简单JS切换。

前端设计 Accordion 手风琴 生成器

Popover弹窗生成器 - 纯HTML声明式弹出层

配置内容和位置，生成使用最新HTML popover属性的轻量弹窗代码，无需JavaScript。

前端设计 HTML Popover 生成器

最新

JSDoc 注释在线生成器 - 根据函数自动生成文档

输入 JavaScript 函数声明，自动生成符合规范的 JSDoc 注释模板。

开发工具 JSDoc 文档 注释 生成器

内联样式提取合并工具 - 汇总 style 属性为类

提取 HTML 中所有内联 style，智能合并相同样式生成 class，并替换为类名以减小体积。

CSS CSS 内联样式 合并 提取

最新

Proxy 对象拦截测试 - 查看 get/set 钩子触发

创建一个 Proxy，定义各种陷阱函数，操作对象时实时显示被拦截的属性和行为。

JavaScript Proxy 拦截 测试

最新

Web Worker 代码生成器 - 快速创建独立线程脚本

编写主线程和 Worker 内的逻辑模板，自动生成分离的 JS 文件代码，加速 Worker 开发。

代码生成 Web Worker 多线程 生成器

寻路算法可视化 - BFS/DFS/A*网格动画

在网格上设置起点/终点和障碍，动态演示广度优先、深度优先、A*等搜索过程。

开发工具 可视化 寻路 算法

页脚粘底生成器 - 始终在页面底部

生成确保页脚始终在页面底部（即使内容不足）的CSS代码，支持Flexbox/Grid方案。

前端设计 CSS 布局 页脚

最新

SVG 动画合成器 - 拖拽元素创建 SMIL 动画

在 SVG 画布上添加形状，设定动画属性（位置、颜色等），生成可内嵌的动画 SVG。

多媒体 SMIL SVG 动画 合成

最新

:has() 选择器测试场 - 父元素根据子元素动态样式

使用 :has() 伪类编写规则，实时查看父元素如何根据子元素状态改变自身样式。

CSS CSS :has 选择器

Kruskal 最小生成树动画 - 按边排序并查集

动画展示 Kruskal 算法选择边和合并集合的过程，高亮生成树边。

图论 Kruskal 动画 最小生成树 算法

<dialog> 模态框设计向导 - 原生对话框样式器

自定义原生 <dialog> 元素的样式、动画和遮罩效果，一键复制生成语义化且无障碍的模态框代码。

HTML dialog HTML 无障碍 模态框

CSS Reset代码生成器 - 统一默认样式重置

勾选或调整所需的重置元素（盒模型、边距等），生成自定义CSS Reset片段，确保跨浏览器一致性。

前端设计 CSS Reset 生成器 重置

PWA安装横幅演示 - 触发beforeinstallprompt

演示如何拦截PWA安装事件并自定义安装按钮，查看浏览器原生安装提示效果。

PWA PWA 安装 演示

CSS 滚动条样式生成器 - ::-webkit-scrollbar 自定义美化

通过可视化控件定制滚动条轨道、滑块、按钮等伪元素样式，即时预览并复制生成代码。

开发工具 CSS 滚动条 生成器 美化

热门

Brainfuck在线解释器 - 步进调试

编写Brainfuck代码，以可视化的方式步进执行，观察活动纸带和指针。

开发工具 Brainfuck 解释器 调试