贝塞尔缓动函数调校工具 - 自定义动画曲线
拖拽两控制点精细微调CSS `cubic-bezier()` 曲线并对比预设函数效果。
UD5工具箱
拖拽两控制点精细微调CSS `cubic-bezier()` 曲线并对比预设函数效果。
浏览并一键复制常见CSS动画(跳动、淡入、滑动等)的@keyframes代码。
在两个不同形状的SVG路径间自动生成流畅的过渡变形动画SMIL代码。
调节笑脸的眼睛和嘴巴弯曲度,添加眨眼等简单动画,导出动态SVG或GIF。
上传GIF,通过滑块改变帧间延迟实时预览变速效果,并下载修改后的动图。
拖拽轨道上的关键帧,调整动画属性和时间点,直接生成@keyframes代码。
生成在输入框内不断打字删除的动态占位符示例文字,提供HTML/CSS代码。
浏览数十种纯CSS实现的加载小动画,点击复制代码直接用于项目。
绑定动画进度到滚动位置,交互式调整参数,直观理解scroll-timeline和view-timeline。
上传Lottie JSON,解析路径并将所有关键帧导出为单独的SVG文件。
配置基于滚动位置触发的CSS @scroll-timeline动画,复制适配代码。
上传GIF动图,将所有帧提取出来并打包下载为单个PNG文件,用于修改分析。
在网页画布上点击鼠标发射绚丽的粒子烟花,支持重力、拖尾和随机颜色,适合节日气氛。
在时间轴上拖拽一个元素的位置和样式,自动录制并生成对应的CSS @keyframes动画代码。
通过注册CSS属性的类型和初始值,演示如何让渐变等属性实现平滑动画。
输入文字,选择闪烁、打字、彩虹等动态效果,生成文字动画GIF。
在两个SVG路径之间创建平滑的变形动画,调整关键点和缓动,生成SMIL代码。
配置SVG路径的描边虚线偏移动画,生成引人注目的自绘线条特效代码。
可选择多种全屏动态特效(气球上升、彩带飘落),用于节日或活动氛围。
构建多层视差滚动示例,调整各层速度和方向,生成简洁HTML/CSS模板。
上传有序的多张图片,设置每帧延迟,合成一个GIF动图。
在多页面或元素切换时呈现流畅的交叉淡入淡出和变形动画,体验原生视图过渡。
用麦克风音量控制网页背景渐变的动态变化,适合音乐可视化与PPT互动。
加载GIF,逐帧查看,可调节播放速度、前进后退。
选择粒子样式(星星、泡泡、花瓣等),生成用于网站背景的纯CSS或JS动画代码。
输入文字,变为可由鼠标吸引或复原的粒子群,生成相应Canvas动画JS代码。
加载Lottie动画JSON文件,播放并控制速度、方向,预览动效效果。
生成网页加载时左右幕帘缓缓拉开的开幕式动画,自定义颜色和速度。
预览并调整撒花动画的速度、密度和形状,生成一键调用撒花的JS函数代码片段。
自定义鼠标移动后留下的彩色粒子或光点轨迹,生成JS与HTML集成代码。
配置粒子数量、颜色、运动方式和连线,生成动态粒子背景效果,一键复制JS实现。
生成逐行显示的终端风格文本动画,带有光标闪烁,营造黑客氛围。
调整重力、弹力系数,观看彩球在Canvas内的弹跳动画。
逐帧在Canvas上绘制,预览连续播放效果,并可导出为GIF或WebM动画。
输入多段话,像打字机一样逐字输出并自动切换,适合大屏展示或预告片效果。
自定义五彩纸屑数量、形状和重力,生成撒花动画代码,可直接嵌入网页完成事件触发。
上传序列帧图片,合成spritesheet并生成对应CSS steps()帧动画代码。
上传多张图片或拍摄连拍,调整帧延迟和尺寸,纯前端合成GIF动画并下载。