沿圆形路径移动动画

父容器旋转，子元素反向旋转

1. 直接绕着一个圆的中心旋转（但内容自身也会旋转，这样会影响可读性）
2. 为了让自身不旋转，在外面再套一层 div，div 自身环绕大圆选装，元素自身反向旋转，用内层的变形来抵消外层的变形效果

缺点：需要额外包裹一层dom元素

CSS Motion Path (offset-*)

通过定义 Path 定义一个路径，让元素沿着该路径运动

路径公式总结

1. 简化写法 (推荐，需较新浏览器)

直接使用 CSS 图形函数 circle() 或 rect() 等。

/* 圆心在容器中心，半径为容器宽度的 50% */
offset-path: circle(50% at 50% 50%);

2. SVG Path 通用公式

如果必须使用 path()，画圆的通用指令如下： 假设圆心坐标为 (cx, cy)，半径为 r。

M cx (cy - r)
A r r 0 1 1 cx (cy + r)
A r r 0 1 1 cx (cy - r)

解析：

• M cx (cy - r): Move to，移动到圆的最顶点。
• A r r 0 1 1 cx (cy + r): Arc，画一个半径为 r 的半圆，终点在圆的最底点 (cx, cy+r)。
• A r r 0 1 1 cx (cy - r): Arc，再画一个半径为 r 的半圆，回到起点。

@property + 数学公式

利用极坐标转换公式：