Web前端入门第 49 问：CSS offset 路径动画演示
什么是路径动画？随手画一条不规则的线，让元素按照这条不规则的线运动起来，这就是所谓的路径动画。
前面说过的动画都只能针对某一个 CSS 属性，要想实现路径动画可没办法，路径动画必须借助 CSS3 的 offset 相关能力。
offset 相关属性
要实现路径动画，必须用到 offset 的相关属性：
offset-anchor 指定元素的运动中心在哪个点上，默认是元素中心点。
offset-distance 指定元素沿路径的运动距离，100% 表示路径总长度。
offset-rotate 设置元素沿路径方向的旋转角度。
offset-position 定义元素沿路径的初始位置。
offset-path 指定元素运动路径。
offset 简写属性，包括以上所有属性。
offset-anchor
设置中心的位置：
offset-distance
设置元素在这个路径中的运动距离：
offset-rotate
设置元素在路径上的旋转角度：
其中第一个 auto 表示让浏览器自己计算角度，第二个角度值表示在计算出来的角度基础上再旋转多少度。
offset-position
说实话，没搞懂这属性的用法，虽然案例看起来属性值是有效的，但没理解到它的实际生效规则。
按照 w3c 的规范说法：如果 offset-path 属性使用的函数未指定起始位置时，则使用 offset-position 属性指定的起始位置。
看下图，虽然元素的位置变化了，但是路径动画的运动距离也跟着变化了！！真是没搞懂...
以上图片的代码：
offset-path 指定元素运动路径
url() 指定 SVG 形状元素的 ID，用法 offset-path: url(#myCircle)。
ray() 线段。用这东东还不如使用 transform 位移。
circle() 圆形，用法：circle(6rem at 12rem 8rem)，表示：圆形，半径为 6rem，圆心为 12rem 8rem。
ellipse() 椭圆，用法 ellipse(40% 50% at left)。表示：椭圆，长轴为 40%，短轴为 50%，圆心为左边。
polygon() 多边形，语法 polygon(x1 y1, x2 y2, x3 y3, ...)
inset() 内嵌矩形，用法 inset(20px 50px 10px 0 round 50px)。表示：20px 50px 10px 0 分别表示上右下左的距离，圆角为 50px。
rect() 矩形，用法 rect(50px 150px 200px 50px round 20%)。表示：矩形上边在 50px，右边在 150px，下边在 200px，左边在 50px，圆角为 20%。
xywh() 矩形，用法 xywh(20px 20px 100% 100% round 10%)。表示：矩形从 20px 20px 开始，宽高为 100%，圆角为 10%。
path() 路径，最为强大的一个东东，复杂的路径动画都需要使用它。
各种路径动画：
上图源码：
<svgversion="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 280" width="400" height="280">
<path stroke="#000000" fill="none" d="m52 52c0 0 54-43.9 104-17 50 26.9 61 27.1 88 1 27-26.1 72-28.9 95 16 23 44.9 41 92.1-16 94-57 1.9-28 91.1 10 50 38-41.1 38-104.9-17-108-55-3.1-176 41.1-142 93 34 51.9 92 80.1 145 67 53-13.1 33-95.9-97-61-130 34.9-65 72.1-22 70 43-2.1-38-65-65-91-27-26-72 113.1-42 96 30-17.1 6-63.9-33-89-39-25.1-83-52.9-29-56 54-3.1-47 114.1-2 112 45-2.1 67-86.9 71-101 4-14.1-124-47.9-48-54 76-6.1-34-4.9 0-22z"/>
</svg>
<svgversion="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 280" width="400" height="280">
<path stroke="#000000" fill="none" d="m52 52c0 0 54-43.9 104-17 50 26.9 61 27.1 88 1 27-26.1 72-28.9 95 16 23 44.9 41 92.1-16 94-57 1.9-28 91.1 10 50 38-41.1 38-104.9-17-108-55-3.1-176 41.1-142 93 34 51.9 92 80.1 145 67 53-13.1 33-95.9-97-61-130 34.9-65 72.1-22 70 43-2.1-38-65-65-91-27-26-72 113.1-42 96 30-17.1 6-63.9-33-89-39-25.1-83-52.9-29-56 54-3.1-47 114.1-2 112 45-2.1 67-86.9 71-101 4-14.1-124-47.9-48-54 76-6.1-34-4.9 0-22z"/>
</svg>
<svgversion="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 280" width="400" height="280">
<path stroke="#000000" fill="none" d="m52 52c0 0 54-43.9 104-17 50 26.9 61 27.1 88 1 27-26.1 72-28.9 95 16 23 44.9 41 92.1-16 94-57 1.9-28 91.1 10 50 38-41.1 38-104.9-17-108-55-3.1-176 41.1-142 93 34 51.9 92 80.1 145 67 53-13.1 33-95.9-97-61-130 34.9-65 72.1-22 70 43-2.1-38-65-65-91-27-26-72 113.1-42 96 30-17.1 6-63.9-33-89-39-25.1-83-52.9-29-56 54-3.1-47 114.1-2 112 45-2.1 67-86.9 71-101 4-14.1-124-47.9-48-54 76-6.1-34-4.9 0-22z"/>
</svg>路径
这里说到的路径，使用到了 SVG 里面的相关知识，SVG 用于绘制矢量图形。
什么是矢量图形？矢量图形是由线条组成的图形，而不是由像素组成的图形，所以矢量图形在放大时，不会出现锯齿，也不会失真。
绘制一条复杂的路径
这里推荐一个网站：https://www.photopea.com/
此网站完全就是 PS 的在线版本，直接浏览器打开即可使用。
1、进入网站之后点击 Start using Photopea 开始使用。
2、有一个隐私选择，直接 同意并继续 即可，如果担心隐私问题，可以使用浏览器的 无痕模式 打开。
3、新建一个画布。
4、使用钢笔工具勾勒出想要的路径形状。
提示：钢笔工具在画布上按住拖动可以绘制出曲线。
5、导出 SVG 文件。
6、找到导出的 SVG ，用记事本打开，path 标签中的 d 属性就是路径的坐标值。
使用路径做路径动画
注意：本示例中为了看到运动路径，将 SVG 的代码也放在了代码中，实际无需 SVG 代码，仅需要 path 中的路径参数即可！
<svgversion="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 280" width="400" height="280">
<path stroke="#000000" fill="none" d="m52 52c0 0 54-43.9 104-17 50 26.9 61 27.1 88 1 27-26.1 72-28.9 95 16 23 44.9 41 92.1-16 94-57 1.9-28 91.1 10 50 38-41.1 38-104.9-17-108-55-3.1-176 41.1-142 93 34 51.9 92 80.1 145 67 53-13.1 33-95.9-97-61-130 34.9-65 72.1-22 70 43-2.1-38-65-65-91-27-26-72 113.1-42 96 30-17.1 6-63.9-33-89-39-25.1-83-52.9-29-56 54-3.1-47 114.1-2 112 45-2.1 67-86.9 71-101 4-14.1-124-47.9-48-54 76-6.1-34-4.9 0-22z"/>
</svg>效果：
写在最后
路径动画让 CSS 在动画领域拥有了更多创造性，虽然还有一些新的特性在浏览器中的兼容不太理想，但未来可期~~
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]