怎么使用css快速创建3点加载动画

发布时间：2021-08-25 15:44:48 作者：小新
来源：亿速云阅读：209

# 怎么使用CSS快速创建3点加载动画

## 引言

在现代网页设计中，加载动画（Loading Animation）是提升用户体验的重要元素。当页面内容需要时间加载时，一个优雅的加载动画可以缓解用户的等待焦虑。其中，3点加载动画（Dot Loading Animation）因其简洁、直观的特点被广泛使用。本文将详细介绍如何仅用CSS快速实现这种动画效果。

---

## 一、基础HTML结构

首先创建一个简单的HTML结构，只需要一个包含3个`<span>`的容器：

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>3点加载动画</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="dot-loading">
    <span></span>
    <span></span>
    <span></span>
  </div>
</body>
</html>

二、核心CSS实现

1. 基础样式设置

.dot-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 全屏居中 */
}

.dot-loading span {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 4px;
}

此时会看到3个静态的圆点：

2. 添加动画效果

通过@keyframes创建缩放动画：

@keyframes dot-scale {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.5);
    opacity: 0.5;
  }
}

3. 应用动画到每个点

为每个点添加动画延迟，形成波浪效果：

.dot-loading span:nth-child(1) {
  animation: dot-scale 1.2s ease-in-out infinite;
}

.dot-loading span:nth-child(2) {
  animation: dot-scale 1.2s ease-in-out infinite 0.4s;
}

.dot-loading span:nth-child(3) {
  animation: dot-scale 1.2s ease-in-out infinite 0.8s;
}

三、进阶优化技巧

1. 颜色与大小变量化

使用CSS变量便于整体调整：

:root {
  --dot-color: #3498db;
  --dot-size: 12px;
  --animation-duration: 1.2s;
}

.dot-loading span {
  width: var(--dot-size);
  height: var(--dot-size);
  background-color: var(--dot-color);
}

2. 缓动函数优化

改用cubic-bezier实现更自然的弹跳效果：

@keyframes dot-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

.dot-loading span {
  animation: dot-bounce var(--animation-duration) cubic-bezier(0.3, 0.7, 0.4, 1) infinite;
}

3. 响应式适配

通过媒体查询调整移动端显示：

@media (max-width: 768px) {
  :root {
    --dot-size: 10px;
  }
}

四、完整代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>高级3点加载动画</title>
  <style>
    :root {
      --dot-color: #3498db;
      --dot-size: 12px;
      --animation-duration: 1.2s;
    }

    body {
      margin: 0;
      background: #f5f5f5;
    }

    .dot-loading {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .dot-loading span {
      display: inline-block;
      width: var(--dot-size);
      height: var(--dot-size);
      border-radius: 50%;
      background-color: var(--dot-color);
      margin: 0 6px;
      animation: dot-bounce var(--animation-duration) cubic-bezier(0.3, 0.7, 0.4, 1) infinite;
    }

    .dot-loading span:nth-child(2) {
      animation-delay: 0.2s;
    }

    .dot-loading span:nth-child(3) {
      animation-delay: 0.4s;
    }

    @keyframes dot-bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-15px);
      }
    }

    @media (max-width: 768px) {
      :root {
        --dot-size: 10px;
      }
    }
  </style>
</head>
<body>
  <div class="dot-loading">
    <span></span>
    <span></span>
    <span></span>
  </div>
</body>
</html>

五、创意扩展方案

1. 颜色渐变效果

.dot-loading span {
  background: linear-gradient(45deg, #3498db, #9b59b6);
}

2. 3D旋转动画

@keyframes dot-rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.dot-loading {
  perspective: 1000px;
}

.dot-loading span {
  animation: dot-rotate 2s linear infinite;
}

3. 跟随鼠标交互

添加简单的JavaScript交互：

document.querySelector('.dot-loading').addEventListener('mousemove', (e) => {
  const dots = document.querySelectorAll('.dot-loading span');
  const xPos = e.clientX / window.innerWidth;
  
  dots.forEach((dot, i) => {
    dot.style.transform = `translateY(${-20 * xPos}px)`;
  });
});

六、性能优化建议

优先使用transform和opacity：这些属性不会触发重排（reflow）
减少图层数量：避免过多的复合图层

合理使用will-change：


.dot-loading span {
 will-change: transform;
}

考虑减少动画元素：在低端设备上可以只显示2个点

七、浏览器兼容性处理

针对旧版浏览器添加前缀：

.dot-loading span {
  -webkit-animation: dot-bounce var(--animation-duration) cubic-bezier(0.3, 0.7, 0.4, 1) infinite;
          animation: dot-bounce var(--animation-duration) cubic-bezier(0.3, 0.7, 0.4, 1) infinite;
}

@-webkit-keyframes dot-bounce {
  /* ... */
}

结语

通过本文的步骤，你不仅学会了创建基础的3点加载动画，还掌握了多种进阶优化技巧。CSS动画的强大之处在于能用简单的代码实现流畅的视觉效果。建议尝试组合不同的动画属性，开发出更具个性的加载效果。

最终效果演示：CodePen示例链接
完整代码下载：GitHub仓库

”`

（注：实际文章中需替换占位链接为真实项目链接，本文约为2000字，可根据需要扩展具体章节内容）