css三个点loading动画

CSS三个点loading动画是一种简单而常见的加载动画效果。它通常用于页面等待或加载内容时，为用户提供一个视觉提示。

.loading {
  text-align: center;
}

.loading::after {
  content: "...";
  animation: dots 1s infinite;
}

@keyframes dots {
  0%,
  20% {
    color: rgba(0, 0, 0, 0.3);
    text-shadow: none;
  }
  40% {
    color: black;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  }
  60% {
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  }
  80%,
  100% {
    color: rgba(0, 0, 0, 0.3);
    text-shadow: none;
  }
} 

以上代码使用伪元素 ::after 来创建三个点， 并利用CSS3的动画关键字 @keyframes 来定义 loading 动画效果。

在动画中，三个点的颜色和阴影都随着时间变化而改变。在每一个点的出现，它的颜色和阴影都会变为黑色，并在一段时间后慢慢消失。

总的来说，CSS三个点loading动画是一种经典而简单的加载动画效果， 在你的网站中使用它，可以帮助提高用户体验。