offset-path元素不规则path路径运动实例页面

展示

代码

• HTML：

  <img src="horse.png" class="horse-run">
  <svg width="280" height="150" viewBox="0 0 280 150">
      <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
  </svg>

• CSS：

  .horse-run {
      position: absolute;
      offset-path: path("M10,80 q100,120 120,20 q140,-50 160,0");
      animation: motion 3s linear infinite;
  }
  @keyframes motion {
      100% { offset-distance: 100%;}
  }