offset-anchor属性基本效果实例页面

展示

代码

• HTML：

  <h4>默认</h4>
  <p>
      <img src="horse.png" class="horse-run">
      <svg width="280" height="100" viewBox="0 50 280 100">
          <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
          <circle cx="0" cy="0" r="5" fill="#000;"></circle>
      </svg>
  </p>
  <h4>offset-anchor: 0 0</h4>
  <p style="--anchor: 0 0; margin-top: -1em;">
      <img src="horse.png" class="horse-run">
      <svg width="280" height="100" viewBox="0 50 280 100">
          <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
          <circle cx="0" cy="0" r="5" fill="#000;"></circle>
      </svg>
  </p>
  <h4>offset-anchor: right bottom</h4>
  <p style="--anchor: right bottom; margin-top: 3em;">
      <img src="horse.png" class="horse-run">
      <svg width="280" height="100" viewBox="0 50 280 100">
          <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
          <circle cx="0" cy="0" r="5" fill="#000;"></circle>
      </svg>
  </p>

• CSS：

  .horse-run {
      position: absolute;
      offset-path: path("M10,80 q100,120 120,20 q140,-50 160,0");
      offset-anchor: var(--anchor);
      animation: motion 3s linear infinite paused;
      outline: solid deepskyblue;
      mix-blend-mode: overlay;
  }
  .playing .horse-run {
      animation-play-state: running;
  }
  @keyframes motion {
      100% { offset-distance: 100%;}
  }
  /* 辅助识别的黑色小圆圈 */
  circle {
      offset-path: path("M10,80 q100,120 120,20 q140,-50 160,0");
      animation: motion 3s linear infinite paused;
  }
  .playing circle {
      animation-play-state: running;
  }