offset-path url() circle()等函数polyfill实例页面

展示

代码

• HTML：

  <h4>马儿运动</h4>
  <img src="../images/horse.png" class="horse-run" is-offset-path>
  <svg width="280" height="150" viewBox="0 0 280 150">
      <path id="road" d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
  </svg>
  
  <h4>circle()双龙戏珠</h4>
  <i class="loading" is-offset-path></i>
  
  <h4>polygon()测试</h4>
  <img src="../images/horse.png" class="horse-polygon" is-offset-path>

• CSS：

  [is-offset-path]:not([style]) {
      visibility: hidden;
  }
  
  .horse-run {
      position: absolute;
      --offset-path: url(#road);
      offset-path: var(--offset-path);
      animation: motion 3s linear infinite;
  }
  
  .loading {
      display: inline-block;
      width: 40px; height: 40px;
      color: deepskyblue;
      text-align: left;
      background: radial-gradient(currentColor 2px, transparent 3px);
      --offset-path: circle(40%);
  }
  .loading::before,
  .loading::after  {
      content: "";
      position: absolute;
      width: 5px; height: 5px;
      background-color: currentColor;
      border-radius: 50%;
      offset-path: var(--offset-path);
      offset-rotate: auto 90deg;
      animation: motion 1s linear infinite;
  }
  .loading::before {
      animation-delay: -.5s;
  }
  
  .horse-polygon {
      --offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%);
      offset-path: var(--offset-path);
      animation: motion 3s linear infinite;
  }
  
  @keyframes motion {
      0% { offset-distance: 0%;}
      100% { offset-distance: 100%;}
  }

• JS：

  // 引入JS文件即可，参见页面源码