手风琴组件生成器 - 折叠面板HTML/CSS代码
在线生成可折叠的手风琴面板,自定义标题、内容与图标,支持纯CSS或简单JS切换。
UD5工具箱
面包板(Breadboard)是一种无需焊接的电路原型搭建工具。其内部结构分为电源轨(纵向连通,用于供电)和端子排(横向5孔一组连通,用于插接元件)。中央槽用于插入DIP封装的集成电路。本工具模拟了真实面包板的孔位连通关系,悬停任意孔即可高亮显示其内部连通组。
① 选择模式(连线/电阻/LED/电容/擦除);② 选择线色;③ 点击第一个孔作为起点(孔会高亮),再点击第二个孔完成放置;④ 在擦除模式下点击连线或端点孔可删除;⑤ 使用撤销按钮或Ctrl+Z回退操作。悬停任意孔可预览其内部连接组。
标准面包板中:电源轨(两侧红/蓝标记列)在纵向上所有孔互通,用于分配VCC和GND;端子排每横向5孔为一组内部互通,中央槽将端子排分为左右独立两组。这意味着同一组5孔内的任意两点已自动连接,无需额外跳线。
切换到对应元件模式后,点击两个孔位即可放置元件符号。电阻显示为锯齿线,LED为二极管符号,电容为双平行线。元件会记录其端点孔位,可像普通连线一样被擦除或撤销。这在规划电路布局时非常实用。
本工具使用贝塞尔曲线渲染连线,使其更接近真实跳线的自然弯曲形态。曲线会自动根据起点和终点的位置调整弧度,跨越中央槽的连线会绕行,避免视觉遮挡。这比直线更美观且更符合实际布线效果。
非常适合!教师可用来演示面包板接线原理、电路布局规划;学生可在实际操作前进行虚拟预演,避免元件损坏。工具支持悬停高亮连接组功能,直观展示面包板内部连通关系,是电子电路教学的理想辅助工具。
在线生成可折叠的手风琴面板,自定义标题、内容与图标,支持纯CSS或简单JS切换。
上传两张图片,实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。
在页面上叠加可拖拽的半透明网格线,辅助网格布局对齐。
上传图标文件并设置背景色,模拟在 Android/iOS 主屏幕上的添加效果,检查视觉适配。
拖拽与门、或门、非门等构建组合逻辑电路,输入高/低电平观察输出。
可视化配置范围滑块的轨道、滑块、填充颜色,生成跨浏览器的CSS代码。
设定物理页框数,输入页引用串,动画展示不同页面置换算法的缺页率。
为内容区域生成灰色闪烁的骨架屏占位代码,包含卡片、标题等组件样式。
添加多个阴影层,独立调节每层的偏移、模糊、扩展和颜色,创造复杂立体效果。
为页面上使用CSS Grid的元素显示网格线和名称,辅助布局开发和调试。
在任意网页上投射可拖拽调整的栅格覆盖线,用来测量和对齐设计稿。
调节光源角度、颜色和距离,生成凹凸柔和的新拟态UI元素CSS盒阴影代码,潮流设计工具。
配置多屏垂直或水平滑动卡片,生成带CSS Scroll Snap的HTML页面代码。
选择触发位置、箭头方向与样式,生成轻量悬停提示框代码。
选择任意基色,自动计算互补色、分裂互补及三分色,提供十六进制代码,一键复制。
在Oklch色彩空间中生成均匀色阶、类比色和互补色方案,确保视觉一致性。
并列播放所有CSS内置缓动函数(ease, linear等)的动画效果,方便对比选择。
在线生成Lorem Ipsum占位文本,可指定段落数、单词数或字节数,用于设计排版和布局填充。
添加层级名称与链接,自动生成带Schema结构化的面包屑导航条。
拖拽调节Flex容器和子项属性,即时可视化响应效果,同时显示CSS代码,边学边用。
展示几组在各类色盲下仍可区分的定性数据配色方案,含Hex码。
输入目标阻值,从标准E系列阻值中找出最接近的两个并联电阻组合。
一款漂亮的拟物指针时钟,同时显示数字时间和日历,适合常驻副屏或全屏。
调节背景色、亮阴影与暗阴影距离,生成新拟态风格按钮/卡片样式并导出代码。
拖拽滑块调整背景模糊度、透明度与边框发光,实时预览毛玻璃面板并复制CSS代码。
显示文本中的非换行空格、全角空格等隐藏字符映射。
配置多个背景层或前景层,设定各层滚动速度因子,生成完整视差页面代码。
通过堆叠多层text-shadow或box-shadow创造浮雕或厚重立体文字效果,复制代码。
通过滑块和开关调整 Flex 容器和子项的所有 CSS 属性,实时观察布局变化,理解弹性盒子。
以3D渲染(p,q)环面纽结,可旋转视角,感受拓扑之美。