CSS 正在加载中的圆点动画介绍当页面正在加载时，常常会使用三个圆点动画来指示页面正在加载中，这个圆点动画通常是通过

介绍

当页面正在加载时，常常会使用三个圆点动画来指示页面正在加载中，这个圆点动画通常是通过 CSS 的动画效果实现的。

实现1

<div class="loading-dots">
  <div class="loading-dot"></div>
  <div class="loading-dot"></div>
  <div class="loading-dot"></div>
</div>
<style>
  .loading-dots {
    display: flex;
    justify-content: center;
  }
  .loading-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 4px;
    border-radius: 50%;
    background-color: #ccc;
    animation: loading 0.6s infinite ease-in-out;
  }
  .loading-dot:nth-child(1) {
    animation-delay: 0.1s;
  }
  .loading-dot:nth-child(2) {
    animation-delay: 0.2s;
  }
  .loading-dot:nth-child(3) {
    animation-delay: 0.3s;
  }
  @keyframes loading {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }
</style>

这里创建了一个 class 名为 loading-dots 的父级元素，使用 display: flex 和 justify-content: center 属性来实现将三个 class 名为 loading-dot 的子元素居中显示。
然后，使用了 @keyframes 规则定义了三个关键帧：0%、50% 和 100%。在 0% 和 100% 的关键帧中，我们将圆点的大小设置为 0，使它们看起来像是消失了。在 50% 的关键帧中，我们将圆点的大小设置为 1，使它们看起来像是展开了。通过这些关键帧的转换，我们可以创建一个看起来像是在不断展开和收缩的三个圆点动画。

实现2

<div>正在加载中<span class="dot2">...</span>
<style>
  .dot2 {
    display: inline-block;
    width: 3ch;
    text-indent: -1ch;
    vertical-align: bottom;
    overflow: hidden;
    animation: dot2 2s infinite step-start both;
    font-family: monospace;
  }
  @keyframes dot2 {
    33% {
      text-indent: 0;
    }
    66% {
      text-indent: -2ch;
    }
  }
</style>

这段 HTML 代码包含一个 div 元素和一个 span 元素，用于显示正在加载中的文本和一个闪烁的小圆点动画。
在 span 元素的 class 中，我们定义了一个名为 dot2 的 CSS 类，用于设置小圆点的动画效果。该类使用了以下 CSS 属性：
- display: inline-block;：将 span 元素设置为行内块元素，以便能够设置宽度和高度等属性。
- width: 3ch;：将 span 元素的宽度设置为 3 个字符的宽度，以便包含小圆点。
- text-indent: -1ch;：将 span 元素的文本缩进设置为 -1 个字符的宽度，以便隐藏小圆点。
- vertical-align: bottom;：将 span 元素的垂直对齐方式设置为底部对齐。
- overflow: hidden;：将 span 元素的溢出内容隐藏，以便只显示文本和小圆点。
- animation: dot2 2s infinite step-start both;：将 span 元素的动画效果设置为 dot2，持续时间为 2 秒，并且无限循环播放，使用 step-start 的计时函数，并且在开始和结束时都应用动画。
- font-family: monospace;：将 span 元素的字体设置为等宽字体，以便小圆点的动画效果更加平滑。
定义了一个名为 dot2 的关键帧动画，用于设置小圆点的闪烁效果。该动画使用了以下关键帧：

33%：将文本缩进设置为 0，显示小圆点。
66%：将文本缩进设置为 -2 个字符的宽度，隐藏小圆点。

实现3

<div>正在加载中<dot></dot>
</div>
<style>
  dot::before {
    content: '...';
    position: absolute;
    animation: dot 2s infinite step-start both;
  }
  dot:after {
    content: '...';
    color: transparent;
  }
  @keyframes dot {
    25% {
      content: '';
    }
    50% {
      content: '.';
    }
    75% {
      content: '..';
    }
    100% {
      content: '...';
    }
  }
</style>

这段 HTML 代码包含一个 div 元素和一个 dot 元素，用于显示正在加载中的文本和一个闪烁的小圆点动画。
使用了伪元素 ::before 和 ::after 来创建小圆点的闪烁效果。同时，使用了以下 CSS 属性：
- dot::before：定义了一个 ::before 伪元素，用于创建小圆点的闪烁效果。我们使用了 content 属性来设置伪元素的内容为 ...，并且设置了 position: absolute 来将伪元素绝对定位在 div 元素内部。我们使用了 animation 属性来定义一个名为 dot 的关键帧动画，持续时间为 2 秒，并且无限循环播放，使用 step-start 的计时函数，并且在开始和结束时都应用动画。
- dot:after：定义了一个 ::after 伪元素，用于创建小圆点的占位符。我们使用了 content 属性来设置伪元素的内容为 ...，并且设置了 color: transparent 来将伪元素的颜色设置为透明，以便它不会显示出来。
定义了一个名为 dot 的关键帧动画，用于设置小圆点的闪烁效果。该动画使用了以下关键帧：

25%：将伪元素的内容设置为空，隐藏小圆点。
50%：将伪元素的内容设置为一个点，显示一个小圆点。
75%：将伪元素的内容设置为两个点，显示两个小圆点。
100%：将伪元素的内容设置为三个点，显示三个小圆点。