手册
目录
收藏745
分享
阅读2651
更新时间2025-07-16
offset-path 属性用于为动画元素创建一条路径。
为动画
div {
offset-path: path('M20,170 L100,20 L180,100 Z');
animation: moveDiv 3s 3;
}
@keyframes moveDiv {
100% { offset-distance: 100%; }
}
运行实例 »点击 "运行实例" 按钮查看在线实例
offset-path: none|path()|ray()|url()|basic-shape|cord-box|initial|inherit;
| 值 | 描述 |
|---|---|
| none | 默认。元素的默认 offset-path 属性值。 |
| path() | 使用 SVG 语法指定路径。参阅：SVG 路径。 |
| ray() | 使用 CSS ray() 函数指定路径。 |
| url() | 使用 SVG 文件的 URL 指定路径。 |
| 使用 CSS 函数（如 inset()、circle()、ellipse() 或 polygon()）定义基本形状来指定路径。 | |
| 使用坐标框指定路径。 | |
| initial | 将此属性设置为其默认值。参阅 initial。 |
| inherit | 从其父元素继承此属性。参阅 inherit。 |
| 默认值： | none |
|---|---|
| 继承性： | 否 |
| 动画制作： | 支持。请参阅：动画相关属性。 |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.offsetPath="path('M20,170 L100,20 L180,100 Z')" |
表格中的数字表示首个完全支持该属性的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 55 | 79 | 72 | 15.4 | 45 |
教程：SVG 路径
教程：CSS 动画
参考：CSS offset 属性
参考：CSS offset-anchor 属性
参考：CSS offset-distance 属性
参考：CSS offset-position 属性
参考：CSS offset-rotate 属性
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
精选课程
共5课时
17.2万人学习
共49课时
77.2万人学习
共29课时
61.9万人学习
共25课时
39.4万人学习
共43课时
71.1万人学习
共25课时
61.8万人学习
共22课时
23万人学习
共28课时
34万人学习
共89课时
125.5万人学习
