UD5工具箱
勾股定理证明动画 - 面积拼图法演示
通过正方形面积拼图动画直观证明 a²+b²=c²，支持多种经典证明方法切换。
标签： 动画工具 - CSS 动效生成
共 67+ 款工具GIF 动画转精灵表生成器 - 按行/列提取帧
上传 GIF 动画，提取每一帧并拼接为单张精灵表图片，可设置排列方式，用于游戏开发。
页面过渡效果沙盒 - 模拟 SPA 页面切换动画
选择和自定义页面进入/离开的动画效果（淡入、滑动、缩放），模拟多页面间的过渡。
二叉树遍历动画 - 前/中/后/层序可视化
构建或随机生成二叉树，逐步动画展示前序、中序、后序和层序遍历的路径。
CSS 关键帧时间轴编辑器 - 拖拽属性关键点
在时间轴上拖拽添加属性关键帧，实时预览动画并生成 @keyframes 代码。
CSS motion-path 路径动画演示 - 元素沿路径运动
绘制 SVG 路径，让元素沿着路径运动，调整速度和缓动，生成动画代码。
CSS Transform 在线生成器 - 平移/旋转/缩放/倾斜 可视化
拖拽或输入数值组合多个 CSS transform 函数，实时观察元素变换效果并获取代码。
面部瑜伽练习引导 - 紧致提拉动画教学
跟着动画演示做面部肌肉锻炼，每天几分钟，舒缓表情纹。
CSS动画录制回放器 - 捕获并微调关键帧
手动播放一个动画，录制元素实际位置变化，反向生成@keyframes。
绳结打法动画 - 10种户外常用结详解
分步动画演示称人结、双套结等打法，可慢放跟学。
正念呼吸球动画 - 跟随膨胀收缩呼吸引导
屏幕上循环展示膨胀收缩的球体，用户跟随节奏吸气呼气，缓解压力。
像素绘板 - 网格填色与动画帧
在可缩放网格上选区颜色绘制像素图，支持多帧预览简单动画。
洗手计时器 - 20秒动画配上生日快乐歌节奏
启动后显示20秒动画倒计时与搓手示范，配“生日快乐”节奏提示。
光合作用过程动画 - 光反应与暗反应步骤
逐步播放叶绿体中进行的光合作用，标注参与物质与能量变化。
打地鼠动画版 - 随机出现点击得分
地鼠随机从洞中弹出，玩家点击击打得分，速度渐增。
SVG 动态波形背景生成器 - 多层叠加与动画
调节振幅、频率和颜色，生成多层SVG波浪，支持循环波动动画，导出CSS或SVG。
CSS 动画曲线编辑器 - 贝塞尔可视化重定义
拖动曲线手柄调整动画缓动，实时预览弹跳或淡入效果，生成cubic-bezier值。
视频转GIF工具 - 选取片段与帧率
上传短视频，截取片段调整尺寸与帧率，转换为循环GIF动画，适合制作表情。
View Transition API 演练场 - 页面切换动画配置
在单页内模拟MPA过渡效果，自定义进场/出场动画，体验View Transitions API丝滑切换。
滚动驱动动画创作台 - 基于Scroll Timeline的可视化
配置滚动容器与目标元素，自定义随滚动触发的关键帧动画，输出纯CSS代码。
Canvas 烟花绽放动效 - 鼠标点击发射烟花
在网页画布上点击鼠标发射绚丽的粒子烟花，支持重力、拖尾和随机颜色，适合节日气氛。
旗语动画演示器 - 字母/数字旗语翻译
输入文本，以动画小人挥舞旗帜演示国际旗语及莫尔斯旗语样式。
环形缓冲区动画演示 - 读写指针运动
动画展示环形/循环缓冲区的Enqueue、Dequeue操作以及头尾指针的移动逻辑。
虚拟镇静瓶 - 摇晃后闪片缓缓落下
摇晃屏幕（或点击）让亮片乱舞，然后静静观看它们缓慢沉降，用于情绪平静。
动态通知徽章生成器 - 数字抖动/红点特效
创建带有弹性动画的通知数字徽章或红点，生成对应的HTML/CSS代码。
SVG路径补间变形动画生成器
在两个不同形状的SVG路径间自动生成流畅的过渡变形动画SMIL代码。
互动指针特效生成器 - 鼠标光标跟随动画
选择光晕、拖尾、磁吸等风格，生成自制的JS鼠标光标特效代码。
动态SVG表情编辑器 - 眨眼/微笑动画
调节笑脸的眼睛和嘴巴弯曲度，添加眨眼等简单动画，导出动态SVG或GIF。
岩石圈循环动画 - 火成/沉积/变质
动画展示火成岩、沉积岩和变质岩之间如何通过埋藏、风化等过程相互转化。
交互式水循环演示 - 蒸发/降水/径流
拖拽太阳、云朵因素，直观展示自然界水循环的蒸发、凝结、降落和渗透过程。
CSS动画时间轴编辑器 - 可视化关键帧
拖拽轨道上的关键帧，调整动画属性和时间点，直接生成@keyframes代码。
打字机占位符效果 - 输入框动画
生成在输入框内不断打字删除的动态占位符示例文字，提供HTML/CSS代码。
Dijkstra最短路径动画 - 图论寻路展示
点击节点添加路径权重，运行Dijkstra算法高亮从起点到所有节点的最短距离和路径。
最小生成树演示 - Prim/Kruskal算法
在画布上放置节点和边，动画展示普里姆和克鲁斯卡尔算法构造最小生成树的过程。
汉诺塔问题动画 - 递归求解过程演示
输入盘子数量，动画展示汉诺塔的递归移动步骤，帮助理解递归思想。
梯度下降可视化 - 寻找函数最小值动画
在二维函数曲面上动态展示梯度下降算法的迭代过程，可调节学习率和初始点。
CSS自定义属性注册演示 - @property
通过注册CSS属性的类型和初始值，演示如何让渐变等属性实现平滑动画。
基数排序动画 - LSD方法逐步可视化
随机生成整数数组，逐步展示按低位优先进行的基数排序过程，辅助算法理解。
滚动驱动动画沙盒 - Animation Timeline演示
绑定动画进度到滚动位置，交互式调整参数，直观理解scroll-timeline和view-timeline。
视图过渡动画演示 - View Transitions API
在多页面或元素切换时呈现流畅的交叉淡入淡出和变形动画，体验原生视图过渡。
预设动画库 - 常用CSS关键帧
浏览并一键复制常见CSS动画（跳动、淡入、滑动等）的@keyframes代码。
彩虹渐变边框生成器 - 动态旋转边框
生成围绕元素不停旋转的多彩渐变边框，通过conic-gradient实现。
终端打字效果生成 - 类似黑客屏幕
生成逐行显示的终端风格文本动画，带有光标闪烁，营造黑客氛围。
链接下划线样式生成器 - 悬停动画
配置不同的下划线出现、消失动画（从中间、左侧等），生成链接美化CSS。
加载打字动画生成 - 三点跳跃CSS
生成经典的“...”打字机加载动画，可定颜色和大小，纯CSS实现。
游戏精灵编辑 - 多帧像素动画绘制
绘制逐帧的像素角色动画，设置帧延迟，预览并导出为Sprite Sheet。
整数数轴演示 - 正负数加减动画
在数轴上动画展示正负数加减法，显示移动方向与结果。
埃拉托斯特尼筛法 - 素数筛选动画
动画展示埃拉托斯特尼筛法逐步划去倍数，最终留下指定范围内的所有素数。
文字动画GIF生成器 - 闪烁/打字效果
输入文字，选择闪烁、打字、彩虹等动态效果，生成文字动画GIF。
弹跳球动画工作室 - 设置重力/弹性
调整重力、弹力系数，观看彩球在Canvas内的弹跳动画。
粒子背景生成器 - 星空/气泡/雪花CSS效果
选择粒子样式（星星、泡泡、花瓣等），生成用于网站背景的纯CSS或JS动画代码。
迷宫自动走解器 - DFS/BFS寻路动画
绘制或生成迷宫墙，选择DFS或BFS算法自动寻找出口，动画展示探索过程。
CSS缓动函数试玩场 - 所有预设一览
并列播放所有CSS内置缓动函数（ease, linear等）的动画效果，方便对比选择。
CSS纯数字倒计时 - 翻牌时钟样式动画
生成使用CSS @property和counter实现的无JS翻页倒计时动效，复制即用。
SVG形状过渡生成器 - 补间变形动画
在两个SVG路径之间创建平滑的变形动画，调整关键点和缓动，生成SMIL代码。
网页开幕效果生成 - 两侧幕帘分开动画
生成网页加载时左右幕帘缓缓拉开的开幕式动画，自定义颜色和速度。
派对背景特效 - 撒花/气泡/星星全屏
可选择多种全屏动态特效（气球上升、彩带飘落），用于节日或活动氛围。
屏保风格时钟 - 浮动大字时间动画
全屏彩色时间显示，文字缓慢移动回弹，类似经典屏幕保护程序，可做桌面装饰。
滚动驱动动画生成器 - Scroll-timeline代码
配置基于滚动位置触发的CSS @scroll-timeline动画，复制适配代码。
Lottie动画预览器 - 拖放JSON查看动效
加载Lottie动画JSON文件，播放并控制速度、方向，预览动效效果。