在css中如何制作加载动画-css教程-PHP中文网

在css中如何制作加载动画

P粉602998670

发布： 2025-10-12 22:21:02

原创

588人浏览过

答案：CSS加载动画通过@keyframes定义关键帧，结合transform、opacity等属性实现。1. 旋转圆圈利用border差异与rotate创建持续旋转效果；2. 脉冲波动画使用scale和opacity变化模拟扩散波纹；3. 多点跳动通过多个圆点设置不同animation-delay实现错落跳动；4. 自定义线条动画借助伪元素与translateX、scaleX制作进度条式动效。核心在于合理运用animation与可动画属性，追求简洁流畅的视觉体验。

在css中如何制作加载动画

在CSS中制作加载动画，主要是利用 @keyframes 定义动画关键帧，并结合 transform、opacity 等属性实现视觉动效。下面介绍几种常见且实用的加载动画实现方式。

1. 旋转圆圈加载动画

这是最常见的加载效果，使用一个圆形元素不断旋转。

<div class="loader"></div>

登录后复制

对应的CSS：

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

登录后复制

说明：通过改变 border-top 颜色制造视觉差，配合 rotate 实现持续旋转。

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

2. 脉冲波（呼吸）动画

模拟心跳或扩散效果，常用于提示等待状态。

.loader {
  width: 20px;
  height: 20px;
  background: #3498db;
  border-radius: 50%;
  opacity: 0.6;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(0);
    opacity: 0.6;
  }
}

登录后复制

这个动画通过缩放和透明度变化，形成向外扩散的“波纹”感。

千博企业网站系统全功能个人版SQL2011 Build 0903

2010.09.03更新优化前台内核处理代码；优化后台内核、静态生成相关代码，生成速度全面提升；修改前台静态模板中所有已知错误；修正后台相关模块所有已知错误；更换后台编辑器，功能更强大；增加系统说明书。免费下载、免费使用、完全无限制。完全免费拥有：应广大用户要求，千博网络全面超值发布企业网站系统个人版程序包：内含Flash动画源码、Access数据库程序包、SQL数据库程序包。全站模块化操作，静态

查看详情

3. 多点跳动动画

三个小球依次上下跳动，常用于现代UI设计。

.loader {
  display: flex;
  gap: 6px;
}

.dot {
  width: 8px;
  height: 8px;
  background: #3498db;
  border-radius: 50%;
  animation: bounce 1.4s ease-in-out infinite both;
}

.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
  0%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
}

登录后复制

HTML结构：

<div class="loader">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

登录后复制

每个点设置不同延迟，形成错落有致的跳动节奏。

4. 自定义线条动画

使用伪元素创建动态线条加载效果。

.loader::before {
  content: '';
  display: block;
  width: 50px;
  height: 5px;
  background: linear-gradient(90deg, #3498db, #e74c3c);
  border-radius: 3px;
  animation: slide 1.5s ease-in-out infinite;
}

@keyframes slide {
  0% { transform: translateX(0) scaleX(1); }
  50% { transform: translateX(100px) scaleX(0.2); }
  100% { transform: translateX(0) scaleX(1); }
}

登录后复制

这种适合做进度条或内容加载指示器。

基本上就这些。核心是掌握 @keyframes 和 animation 属性的使用，再结合 transform、opacity 等可动画属性自由发挥。加载动画不需要复杂代码，简洁流畅更重要。

以上就是在css中如何制作加载动画的详细内容，更多请关注php中文网其它相关文章！