🔧
骨架屏生成器
生成器与设计 · 免费在线工具
生成骨架屏加载动画 CSS。
CoderNewbie 团队
特性
100%
16px
1.5s
Base
Highlight
.skeleton {
width: 100%;
height: 16px;
border-radius: 4px;
background-color: #1e293b;
background-image: linear-gradient(
90deg,
#1e293b 0%,
#334155 50%,
#1e293b 100%
);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s linear infinite;
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}3 种形状
文本条、矩形和圆形，适用于任何 UI 占位符。
闪烁动画
通过 @keyframes 实现可调速度的 linear-gradient 闪烁。
品牌颜色
设置基色和高亮色以匹配你的主题。
如何使用骨架屏生成器
- 1配置生成器设置（颜色、尺寸、格式等）。
- 2输入所需的文本或数据。
- 3点击生成按钮创建输出。
- 4下载或复制生成的结果。
功能特点
- ✓完全免费 — 无需注册、无订阅、无广告
- ✓完全在浏览器中运行 — 数据从不离开您的设备
- ✓快速轻量 — 即时获得结果
- ✓跨平台 — 支持桌面、平板和移动设备
常见问题
生成的内容可以商用吗？
是的，所有生成的内容（二维码、渐变、颜色）均可免费用于个人和商业用途。
支持哪些输出格式？
二维码可下载为 PNG 或 SVG，渐变生成 CSS 代码，颜色输出 HEX、RGB 和 HSL 格式。