玻璃拟态卡片生成 - CSS Glass Card
采用backdrop-filter和半透明背景,生成流行的玻璃质感UI卡片代码。
UD5工具箱
在线生成随机液体飞溅背景 · 墨水 · 水彩 · 颜料飞溅艺术
采用backdrop-filter和半透明背景,生成流行的玻璃质感UI卡片代码。
在图片上叠加倾斜雨丝和雾气,并调节雨的密度和速度,可导出动画GIF。
以鼠标点击处为落石,在图片上产生一圈圈扩散的波纹折射扭曲。
将图片内容加粗白色描边并添加阴影,生成类似聊天贴纸的圆形/方形效果。
在照片上随机生成大小不同、带阴影的镂空透明圆孔,创造奶酪状的创意卡片。
选择多张图片和一个Logo图,批量将Logo放在角落并调整透明度,并下载打包。
演示如何用Intersection Observer实现滚动到底部自动加载内容的经典模式。
随机将行业、技术和目标用户拼接,生成充满槽点的奇葩创业点子,仅供娱乐。
嵌套的彩色方块,点击内层观察事件传播顺序,直观理解addEventListener的第三个参数。
在 Favicon 上叠加未读消息数量的数字角标,生成相应 JS 代码。
在虚拟盆中拖拽树木、石头、苔藓等元素,设计自己理想的盆景样式。
从任意分布中抽取样本并绘制均值分布直方图,随着样本量增大趋近正态分布。
点击屏幕转瓶,指针指向谁谁接受真心话或大冒险的挑战。
使用多个哈希函数和位数组,演示布隆过滤器的添加和查询,计算误判率。
粘贴Shadow DOM代码,直观预览封装组件内部的CSS作用域及其对外界的影响。
按Facebook/Youtube/Twitter标准尺寸生成背景,叠加文字,下载封面。
通过填写项目名称、描述、安装步骤等基础信息,自动生成结构化的 README.md 文件。
填写项目名称、描述、安装步骤等,实时预览并生成完整的 Markdown 格式 README。
利用Canvas将摄像头画面或图片实时切割并多重镜像,形成动态万花筒视觉效果。
设计包含头像、姓名、职位、电话和社交链接的专业邮件签名,导出 HTML 代码。
模拟高频事件流,分别应用防抖和节流策略,用时间轴展示处理函数实际被调用的时机。
通过多层 text-shadow 叠加生成具有厚度和光照感的 3D 文字效果。
通过滑块和开关调整 Flex 容器和子项的所有 CSS 属性,实时观察布局变化,理解弹性盒子。
调整粒子数量、形状、颜色、连线等参数,实时预览粒子背景效果,导出 Particles.js 配置 JSON。
创建 Shadow DOM 与普通 DOM 元素,对比样式隔离效果,理解 @layer 和 scoped styles。
调整 text-decoration-line、style、color、thickness 等属性,实时预览文字装饰效果并生成代码。
列出所有标准 CSS 光标值(pointer, grab, zoom-in 等),鼠标悬停实时查看对应光标样式并复制代码。
通过可视化控件定制滚动条轨道、滑块、按钮等伪元素样式,即时预览并复制生成代码。
选择触发位置、箭头方向与样式,生成轻量悬停提示框代码。
浏览数十种纯CSS加载旋转器,点击复制代码或自定义颜色尺寸,节省开发时间。