会动的三个 点

视图：

  <h1>智能扫描中<span class="dot">...</span></h1>

 

逻辑：

@keyframes dot {

  0% {

    width: 0;

    margin-right: 1.5em;

  }

  33% {

    width: 0.5em;

    margin-right: 1em;

  }

  66% {

    width: 1em;

    margin-right: 0.5em;

  }

  100% {

    width: 1.5em;

    margin-right: 0;

  }

}

.dot {

  animation: dot 3s infinite step-start;

}