offset-distance与无限循环运动实例页面

展示

代码

• HTML：

  <i class="loading"><i></i></i>

• CSS：

  .loading {
      display: inline-block;
      width: 40px; height: 40px;
      color: deepskyblue;
      text-align: left;
      background: radial-gradient(currentColor 2px, transparent 3px);
      animation: spin 6s linear infinite reverse;
  }
  .loading::before,
  .loading::after,
  .loading > i  {
      content: "";
      position: absolute;
      width: 5px; height: 5px;
      background-color: currentColor;
      box-shadow: 0 6px 0 -.5px, 0 12px 0 -1px, 0 18px 0 -1.5px, 0 24px 0 -2px;
      border-radius: 50%;
      offset-path: path("M20 0 L5.858 30L34.142 30Z");
      offset-rotate: auto 90deg;
      animation: motion 1.5s linear infinite, shadow .5s linear infinite alternate;
  }
  .loading::before {
      animation-delay: -.5s;
  }
  .loading::after {
      animation-delay: -1s;
  }
  
  @keyframes motion {
      100% { offset-distance: 100%;}
  }
  @keyframes shadow {
      50% { box-shadow: 0 6px 0 -.5px, 0 12px 0 -1px, 0 18px 0 -1.5px, 0 24px 0 -2px;}
      0%, 100% { box-shadow: 0 0 0 -.5px, 0 0 0 -1px, 0 0 0 -1.5px, 0 0 0 -2px;}
  }
  @keyframes spin {
      100% { transform: rotate(360deg);}
  }