css加载中效果怎么做_通过keyframes实现loading动画-css教程-PHP中文网

css加载中效果怎么做_通过keyframes实现loading动画

P粉602998670

发布： 2025-12-20 15:39:07

原创

591人浏览过

CSS @keyframes 可实现无需 JavaScript 的轻量加载动画：1. 圆圈旋转用 border+rotate；2. 骨架屏用渐变背景+translateX脉冲；3. 多点跳动用 opacity 动画+延迟；4. 优先使用 transform/opacity 保障性能。

css加载中效果怎么做_通过keyframes实现loading动画

用 CSS @keyframes 实现加载中（loading）动画，核心是定义一个循环播放的帧动画，再应用到目标元素上。不需要 JavaScript 就能完成，轻量、高效、易维护。

1. 基础圆圈旋转动画（最常用）

适用于按钮、图标、独立 loading 指示器等场景。通过 border 和 border-radius: 50% 绘制圆环，再用 transform: rotate() 驱动旋转：

@keyframes spin {
  to { transform: rotate(360deg); }
}
.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #eee;
  border-top-color: #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

登录后复制

说明：只给顶部边框设色，其余为浅灰，旋转时就形成“流动”的视觉效果。时长（1s）、速度曲线（linear）和循环（infinite）缺一不可。

2. 骨架屏式脉冲动画（模拟内容加载）

适合列表、卡片等区域占位，用渐变背景 + 位移模拟“扫描光效”：

立即学习“前端免费学习笔记（深入）”；

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.skeleton {
  background: linear-gradient(90deg, transparent, #f0f0f0, transparent);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

登录后复制

建议：把该类名加在灰色占位块上（如 <div class="skeleton" style="height: 24px;"></div>），动画会从左到右扫过，模拟数据加载中的状态。

Prisma

Prisma是一款照片编辑工具，用户可以轻松地将照片转换成数字艺术。

查看详情

3. 多点跳动动画（如省略号或三颗小球）

适合文字后缀（如“加载中…”）或独立指示组件。用多个伪元素分别控制延迟：

用 ::after 生成三个点，并设相同动画
每个点用 animation-delay 错开时间，实现波浪式跳动
关键帧只需控制 opacity 或 transform: scale()

@keyframes bounce {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
.loading-dots::after {
  content: "…";
  animation: bounce 1.5s infinite;
}
.loading-dots::after {
  animation-delay: 0.2s;
}
.loading-dots::after {
  animation-delay: 0.4s;
}

登录后复制

注意：实际中更推荐用三个独立 <span></span> 元素，比伪元素更可控；若用伪元素，需配合 display: inline-block 和 vertical-align 对齐。