不喜欢广告？ 去 无广告 今天
CSS 加载动画生成器
颜色开发人员
广告 移除？
广告 移除？
指导
CSS 加载动画生成器
生成八个流行的纯CSS加载动画——旋转环、双环、脉冲点、弹跳点、弹跳球、均衡条、脉冲圆圈和输入提示。可调整颜色、大小、笔宽和持续时间；实时预览会立即更新；将@keyframes和最少的HTML代码复制到您的项目中。无需JavaScript，无需SVG，无需外部依赖。
如何使用
- 从下拉菜单中选择一个动画类型。
- 设置加载器大小（像素），并调整环形类型中的笔宽。
- 选择主色和轨道/次色。
- 设置一个完整周期的持续时间（秒）。
- 选择输出格式——HTML + CSS组合、仅CSS或仅HTML。
- 可选地为屏幕阅读器设置自定义ARIA标签。
- 复制生成的代码片段或将其下载为文件。
特征
- 八种动画风格 ——涵盖了现代UI中最常见的加载模式。
- 实时预览 ——每次更改都会立即重新渲染，以便您在复制前验证时长和流畅度。
- 纯CSS输出 ——无需JavaScript运行时开销，也无需维护SVG标记。
- 作用域类名 ——每个生成的代码片段使用唯一的前缀，因此多个加载器可以共存而不会发生冲突。
- 默认可访问 ——每个加载器都包含role="status"和可配置的aria-label。
- 三种输出模式 ——根据您的集成方式，提供HTML + CSS组合、仅CSS或仅HTML。
常问问题
-
CSS中的@keyframes是什么作用？
@keyframes规则定义了CSS动画的中间步骤。每个步骤（如0%，50%，100%）描述了元素在该动画周期时刻应具有的样式。浏览器会在这些步骤之间进行插值，以产生平滑的运动。如果没有@keyframes，动画属性将没有任何内容可播放。
-
为何使用CSS动画而不是SVG或JavaScript来制作加载器？
CSS动画在浏览器的合成线程上运行，这意味着即使主JavaScript线程繁忙，它们也能保持平滑运行。它们没有脚本依赖，没有额外的负载，并且在旧设备上能优雅降级。SVG和JavaScript加载器可以实现更复杂的功能，但对于简单的旋转器或弹跳点，CSS是最轻量且最可靠的选项。
-
什么是三次贝塞尔时间函数？
三次贝塞尔时间函数通过四个控制点在曲线上描述动画的加速和减速过程。与linear或ease-in-out等关键词相比，三次贝塞尔函数允许您精细调整运动的感觉——例如，弹跳球使用cubic-bezier(0.5, 0.05, 0.5, 0.95)来模拟重力效果。
-
为何加载动画需要role和aria-label属性？
屏幕阅读器无法看到旋转的圆圈，因此需要一个程序化的提示说明正在发生什么。role="status" 告诉辅助技术，该元素传达的是实时状态更新，而aria-label则提供给用户可读的文本内容。如果没有这些属性，加载器对视力障碍用户是不可见的。
