UD5工具箱
加载旋转器合集 - 数十种纯CSS加载动画
浏览数十种纯CSS实现的加载小动画，点击复制代码直接用于项目。
代码已复制到剪贴板
加载动画合集
纯 CSS 旋转器 & 骨架屏 · 点击卡片即可复制代码
卡片骨架
文本段落骨架
用户资料骨架
表格行骨架
常见问题
纯 CSS 加载动画是指完全使用 CSS（如
@keyframes、animation、transform 等属性）实现的加载效果，无需 JavaScript 或 GIF 图片。优势包括：性能高（GPU 加速）、体积小（几行 CSS 即可）、可定制性强（轻松修改颜色、大小、速度）、兼容现代浏览器，且不阻塞页面渲染。
骨架屏在内容加载时展示页面的大致结构，让用户感知到内容正在加载，减少焦虑感。相比空白页面或传统转圈加载，骨架屏能降低用户感知的等待时间，提升感知性能。它还能避免布局偏移（Layout Shift），保持页面稳定性。Facebook、YouTube、LinkedIn 等主流产品都广泛使用骨架屏。
复制代码后，您可以轻松修改 CSS 中的相关属性：颜色——修改
border-color、background 或 color 属性值；大小——调整 width 和 height 属性；速度——修改 animation 中的持续时间（如 0.7s 改为 1.2s）。建议使用 CSS 变量统一管理，例如 --spinner-color: #6366f1;。
Shimmer（光泽滑动）效果通过渐变背景 + 背景位移动画实现。核心原理：设置一个宽度为 200% 的线性渐变背景（如
linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%)），然后使用 @keyframes 动画循环移动 background-position，从而产生光泽从左滑到右的视觉效果。该动画完全由 GPU 加速，性能优秀。
本合集中的动画均使用标准 CSS 属性，兼容 Chrome、Firefox、Safari、Edge 等所有现代浏览器。其中"渐变锥形"旋转器使用了
conic-gradient，在极旧版浏览器中可能不支持，但 97%+ 的现代浏览器均已兼容。对于需要兼容旧浏览器的项目，建议选择"经典边框"或"跳动圆点"等使用基础 CSS 属性的动画。
多样式骨架屏生成器 - 卡片/列表/表格
选择卡片、列表或表格布局，生成对应的灰色闪烁骨架屏HTML/CSS代码。
加载动画合集 - 数10种纯CSS Spinner预览
浏览数十种纯CSS加载旋转器，点击复制代码或自定义颜色尺寸，节省开发时间。
Details/Summary 手风琴效果生成 - 纯HTML折叠面板
无需JavaScript，构建纯HTML5折叠面板，添加自定义图标与动画样式，输出语义化代码。
纯CSS下拉菜单生成器 - 无限层级嵌套
构建无需JavaScript的多层级下拉菜单，提供HTML结构和CSS样式代码。
CSS 动画曲线编辑器 - 贝塞尔可视化重定义
拖动曲线手柄调整动画缓动，实时预览弹跳或淡入效果，生成cubic-bezier值。
滚动捕捉沙盒 - CSS Scroll Snap实验
调整滚动容器和子项的对齐方式、停止点，观察CSS Scroll Snap平滑滑动效果。
CSS悬停效果生成器 - 按钮/卡片Hover动画
为按钮或卡片配置悬停时的边框、阴影、缩放、颜色等动画，自动生成CSS transition代码。
精灵图分割器 - 将合图拆成单帧小图
上传合并的精灵图，设定行数和列数，自动裁切为单独的小图并打包下载。
纯CSS评论组件生成 - 嵌套精美样式
生成带嵌套、头像和元数据的纯CSS评论列表样式模板。
渐变文字快速预览 - 点击预览多款文字渐变
预设多种流行文字渐变样式，点击段落预览，一键复制background-clip代码。
模态框代码生成器 - 弹窗窗口HTML/CSS生成
配置弹窗标题、内容、按钮和动画效果，一键生成干净的自定义模态框HTML/CSS代码。
CSS Sprite生成器 - 图片合并与定位代码生成
上传多张小图标，自动合并成一张Sprite图，并生成对应CSS背景定位代码，提升加载性能。
随机渐变按钮 - 一键获得亮眼CSS按钮
随机生成漂亮的渐变按钮样式，显示对应的CSS代码，可复制或继续随机。
首屏关键CSS提取工具 - 可视化选取折叠之上样式
粘贴HTML和CSS，工具将尝试分析并为你抽取首屏内联样式，辅助性能优化。
单选复选美化生成器 - 纯CSS自定义样式
选择模板，调节颜色与动画，生成美观的单选/复选框样式代码。
大型 ASCII 横幅生成器 - FIGlet 多字体选择
输入文字并选择 FIGlet 字体，生成大型 ASCII 艺术字横幅，用于代码注释或说明。
CSS边框图片生成器 - 九宫格切片直观
上传图片并可视化调整九宫格切片线，生成CSS border-image相关代码。
SVG转Data URI内联 - 优化后可直接用于CSS
粘贴SVG代码，压缩并编码为data URI，用于background-image或img。
SVG路径转CSS裁剪路径 - 形状转换
将SVG路径数据转换为CSS clip-path: path() 语法，用于裁剪HTML元素。
CSS 计数器样式在线预览 - 自定义有序列表标记
选择不同的 list-style-type（disc, decimal, lower-roman 等）并实时查看列表样式渲染效果。
CSS格式化与美化工具 - 在线CSS压缩整理
在线CSS格式化工具，支持CSS代码的美化缩进和压缩精简，帮助您快速整理样式表。
镶嵌图案生成器 - 交互式密铺平面设计
基于方形或六边形网格，通过变形滑块创建有趣的密铺镶嵌图案。
Web Vitals模拟仪表盘 - LCP/FID/CLS演示
通过滑块调节LCP、FID、CLS等指标值，实时显示对应的谷歌核心网页指标评分与颜色。
Web Vitals 本地模拟器 - LCP/FID/CLS面板
加载测试页面，实时显示Largest Contentful Paint等核心指标，了解加载体验。
Sass Mixin生成器 - 常用代码块模板
选择常用模式(如响应式断点、flex居中、省略号)，生成对应Sass Mixin代码。
Meta标签生成器 - HTML元数据SEO代码片段
为网页生成常用的meta标签（description, keywords, viewport等），优化搜索引擎收录。
CSS 容器查询实验室 - 基于卡片宽度的响应式布局
拖拽改变容器宽度，观察使用container-type和@container规则的元素如何自适应样式。
JavaScript格式化工具 - 在线JS代码美化/压缩
在线JavaScript代码格式化与压缩，支持缩进美化、变量混淆压缩，适用于前端调试和发布优化。
JSON展平工具 - 嵌套对象转为单层键值
将深度嵌套的JSON对象转化为用点号或括号分隔的单层键值对，便于数据清洗。