视差层构建器 - 多层滚动的HTML模板
配置多个背景层或前景层,设定各层滚动速度因子,生成完整视差页面代码。
UD5工具箱
拖拽STL文件到此处
或点击上方按钮上传
配置多个背景层或前景层,设定各层滚动速度因子,生成完整视差页面代码。
调整透明度、模糊度和边框,实时预览毛玻璃UI卡片,生成兼容CSS backdrop-filter代码。
在页面上叠加可拖拽的半透明网格线,辅助网格布局对齐。
拖拽滑块调整背景模糊度、透明度与边框发光,实时预览毛玻璃面板并复制CSS代码。
通过堆叠多层text-shadow或box-shadow创造浮雕或厚重立体文字效果,复制代码。
显示文本中的非换行空格、全角空格等隐藏字符映射。
加载Lottie动画JSON文件,播放并控制速度、方向,预览动效效果。
配置滚动容器与目标元素,自定义随滚动触发的关键帧动画,输出纯CSS代码。
设定物理页框数,输入页引用串,动画展示不同页面置换算法的缺页率。
选择触发位置、箭头方向与样式,生成轻量悬停提示框代码。
制作像荧光笔划过的高亮背景或扫描下划线效果,导出类名。
自定义原生 <dialog> 元素的样式、动画和遮罩效果,一键复制生成语义化且无障碍的模态框代码。
在绘图板画几条直线,算法自动利用霍夫变换检测并高亮出这些线段。
可视化Flexbox容器和子项的所有属性及选项,鼠标悬停预览效果。
上传两张图片,实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。
上传一组图片,设定每张展示秒数和转场,生成WebM视频幻灯。
提供数十种精致SVG背景纹理,可调颜色,生成CSS背景代码或下载SVG。
拖放 lcov.info 文件,以颜色标示每行代码的覆盖状态。
分别使用主线程Canvas和OffscreenCanvas在Worker中渲染动画,对比FPS和流畅度。
上传图标文件并设置背景色,模拟在 Android/iOS 主屏幕上的添加效果,检查视觉适配。
拖拽调节Flex容器和子项属性,即时可视化响应效果,同时显示CSS代码,边学边用。
在可缩放网格上选区颜色绘制像素图,支持多帧预览简单动画。
为页面上使用CSS Grid的元素显示网格线和名称,辅助布局开发和调试。
基于简单WebSocket服务,多人同时在同一画布上绘图,远程协作。
创建 Shadow DOM 与普通 DOM 元素,对比样式隔离效果,理解 @layer 和 scoped styles。
通过滑块和开关调整 Flex 容器和子项的所有 CSS 属性,实时观察布局变化,理解弹性盒子。
为内容区域生成灰色闪烁的骨架屏占位代码,包含卡片、标题等组件样式。
绑定动画进度到滚动位置,交互式调整参数,直观理解scroll-timeline和view-timeline。
并列播放所有CSS内置缓动函数(ease, linear等)的动画效果,方便对比选择。
添加多个阴影层,独立调节每层的偏移、模糊、扩展和颜色,创造复杂立体效果。