​x
 
<!DOCTYPE html>
<html>
<head>
<style>
  /* 样式部分 */
  #frameDiv {
    width: 200px;
    height: 200px;
    margin: 20px;
    position: relative;
    border: solid black 1px;
    background-color: rgb(205, 242, 205);
  }
​
  span {
    position: absolute;
    top: 0;
    left: 0;
  }
​
  #frameDiv > div {
    width: 50px;
    height: 20px;
    border-radius: 3px 10px 10px 3px;
    background-color: hotpink;
    offset-path: path('M20,170 L100,20 L180,100 Z'); /* 定义路径 */
    animation: moveDiv 3s 3; /* 动画：3 秒完成，重复 3 次 */
  }
​
  @keyframes moveDiv {
     /* 动画结束时，偏移距离为 100% */
    100%  { offset-distance: 100%; }
  }
</style>
</head>
<body>
​
<h1>沿偏移路径的动画</h1>
​
<div id="frameDiv">
  <span>200x200px</span>
  <div></div> <!-- 动画的div -->
</div>
​
<p>粉红色的 div 被设置为沿 SVG 语法编写的路径进行动画。</p>
<p><code>offset-path: path('M20,170 L100,20 L180,100 Z');</code> 创建了一个路径，从位置 x,y=20,170 开始，然后画一条线到位置 100,20，再画一条线到 180,100，最后画一条线回到起点。</p>
<ul>
  <li>'M' = 移动到</li>
  <li>'L' = 画线到</li>
  <li>'Z' = 关闭路径</li>
</ul>
<p>有关如何绘制 SVG 路径的更多信息，请访问 <a href="https://www.w3school.com.cn/graphics/svg_path.asp" target="_blank">SVG 教程 -> SVG路径</a></p>
​
</body>
</html>
​