step-start实现点点点打点动画效果实例页面

展示

代码

• HTML：

  正在加载中<dot>...</dot>

• CSS：

  dot {
      display: inline-block; 
      height: 1em; line-height: 1;
      vertical-align: -.25em;
      overflow: hidden;
  }
  dot::before {
      display: block;
      content: '...\A..\A.';
      white-space: pre-wrap;
      animation: dot 3s infinite step-start both;
  }
  @keyframes dot {
      33% { transform: translateY(-2em); }
      66% { transform: translateY(-1em); }
  }