如何用css实现简单加载动画

旋转圆圈动画通过border和rotate实现持续转动；2. 脉冲波动画利用scale与opacity变化模拟呼吸效果；3. 横条进度流动画使用伪元素和translateX制造流动感。

实现一个简单的加载动画，常用的方式是利用CSS的@keyframes和animation属性。下面介绍几种常见且实用的简单加载动画实现方法。

1. 旋转圆圈加载动画

这是最基础也最常见的加载效果，适合用于页面或组件加载时的提示。

HTML:
<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的颜色并配合transform: rotate()实现持续旋转效果。

2. 脉冲波（呼吸灯）动画

适用于提示用户“正在加载”，视觉柔和。

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

Boomy

AI音乐生成工具，创建生成音乐,与世界分享.

272

查看详情

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

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

说明：使用scale和opacity模拟“呼吸”效果，看起来像在脉动。

3. 横条进度流动画

模仿进度条流动的感觉，适合内容加载场景。

CSS:
.loader {
  width: 100px;
  height: 10px;
  background: #f1f1f1;
  border-radius: 5px;
  overflow: hidden;
}

.loader::after {
  content: '';
  display: block;
  width: 30%;
  height: 100%;
  background: #3498db;
  animation: slide 1.2s ease-in-out infinite;
}

@keyframes slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

说明：通过伪元素和translateX实现从左到右的滑动动画，模拟流动感。

基本上就这些。选择哪种动画取决于你的设计风格和使用场景。关键点是合理使用animation、transform和@keyframes，保持代码简洁高效。

以上就是如何用css实现简单加载动画的详细内容，更多请关注php中文网其它相关文章！