dot动态

<span class='dot-animate'>...</span>
.dot-animate {
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
}
.dot-animate::after {
  content: '...';
  width: 1em;
  display: inline-block;
  animation: dot 3s infinite step-start;
}
@-webkit-keyframes dot {
  0% {
    content: '.';
  }
  33% {
    content: '..';
  }
  66% {
    content: '...';
  }
  100% {
    content: '.';
  }
}
.dot-animate {
  -webkit-animation: dot 3s infinite step-start;
}

@keyframes dot {
  0% {
    content: '.';
  }
  33% {
    content: '..';
  }
  66% {
    content: '...';
  }
  100% {
    content: '.';
  }
}