Shadow DOM 插槽演示 - slot 内容投影可视化
构建带具名插槽的 Shadow DOM,改变宿主内容观察插槽分配,学习组件组合。
UD5工具箱
上传图片或点击"演示图"查看浮雕效果
新像素值 = 方向梯度 × 强度 + 偏移量。方向梯度通过组合水平梯度(Gx)和垂直梯度(Gy)来计算:方向梯度 = cos(θ)×Gx + sin(θ)×Gy,其中θ是光照角度。Gray = 0.299R + 0.587G + 0.114B),然后再应用浮雕算法。这样产生的浮雕效果是经典的单色调,类似真实的石膏浮雕或硬币压印。关闭此选项则会对RGB三个通道分别处理,产生带有色彩边缘的彩色浮雕,风格更加艺术化。构建带具名插槽的 Shadow DOM,改变宿主内容观察插槽分配,学习组件组合。
配置粒子数量、颜色、运动方式和连线,生成动态粒子背景效果,一键复制JS实现。
结合对比度拉伸和强噪点纹理,将照片变为具有深色粗糙质感的炭笔素描画。
上传深度图或选择预设形状,生成可通过平行眼或交叉眼观看的单图像立体图。
将图片转换为由彩色三角形构成的低多边形艺术风格,可调整三角网格密度和模糊。
生成深邃宇宙风格的粒子背景代码,粒子间近距离自动连线,适合科技感网页。
拖入 Lottie 动画 JSON 文件,即刻播放矢量动画,支持暂停、调速、背景颜色设置。
生成从0滚到目标数字的动画,可调节速度和延迟,复制HTML/JS代码。
以线框形式渲染正四面体、立方体等柏拉图立体,可鼠标拖拽旋转。
构建嵌套元素,触发事件并逐步显示事件流经路径,可切换捕获/冒泡模式。
可混入指定关键词的Lorem Ipsum生成器,支持段落、列表与HTML标记,更真实模拟内容。
使用Canvas绘制的经典吃豆人游戏,包含鬼魂AI与经典音效,致敬怀旧街机。
调整标准方程参数,动态绘制对应的圆锥曲线图形。
创建自定义 DataTransfer 对象,设置数据和拖拽效果,可用于测试拖放事件处理。
输入复杂对象,使用 structuredClone 进行深拷贝,并对比原始对象与克隆体,展示可拷贝类型。
根据 JSON 数据结构在线生成 Java 类代码,包含字段映射、getter/setter,支持嵌套类型。
生成一键注入的JS书签,将任意网页的背景强制变黑、文字变白或变黄。
设置不同属性的 Cookie 并展示其跨站行为,帮助理解现代 Cookie 安全策略。
使用鼠标或触控笔在无限画布上涂鸦,激光笔模式不留下痕迹,适合演示思路。
放置大量图片并开启懒加载,通过滚动观察网络请求的发起,验证原生延迟加载。
动画展示埃拉托斯特尼筛法逐步划去倍数,最终留下指定范围内的所有素数。
独立控制白、粉红、布朗噪声及雨声、浪声的音量,创造专属专注或放松环境音。
从内置库选择喜欢的名言,拖拽到屏幕任意位置缩放摆放,截图当壁纸。
逐步动画展示埃拉托斯特尼筛法,高亮被划掉的合数,直观理解素数生成原理。
上传图片或粘贴 URL,提取主色调和辅助色,保存为调色板集合。
在曲线上添加控制点调节图片亮度和各颜色通道,支持 S 曲线、反相、负片等高级调色效果。
输入目标文字并上传代表图片,布局生成梦想板图片每日看。
上传图片,调节块大小,生成马赛克风格图片,可下载。
用密集的交叉线条重绘图片,光影由线条的粗细和密度决定,模拟版画排线风格。
拖拽四角将斜拍的文档拉平为标准矩形,重采样为正对视角的文档图片。