手册
目录
收藏271
分享
阅读2653
更新时间2025-07-16
offset 属性用于沿路径动画化元素，它是以下属性的简写形式：
offset-anchoroffset-distanceoffset-pathoffset-positionoffset-rotate有关设置 offset 属性值的不同方式，请参阅下方更多实例。
使用 offset 简写属性为 元素设置 offset-path、offset-distance 和 offset-rotate 的属性值：
img {
offset: path('M 50 80 C 150 -20 250 180 350 80') 150px auto 45deg;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
使用 元素的
offset 属性设置 offset-path 和 offset-rotate 的属性值：
img {
offset: path('M 50 80 C 150 -20 250 180 350 80') 45deg;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
使用 元素的
offset 属性设置 offset-path 和 offset-distance 的属性值：
img {
offset: path('M 50 80 C 150 -20 250 180 350 80') 150px;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
使用 元素的
offset 属性设置 offset-path、offset-distance、offset-rotate 和 offset-anchor 的属性值：
img {
offset: path('M 50 80 C 150 -20 250 180 350 80') 150px -90deg / 0% 50%;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
offset: auto|value|initial|inherit;
| 值 | 描述 |
|---|---|
| auto | 默认。请参阅每个单独的 'offset-' 属性的默认值。 |
| offset-anchor | 指定元素上固定在动画路径上的点。默认值为 auto。 |
| offset-distance | 指定从 offset-path 定义的路径起点开始的距离。默认值为 0。 |
| offset-path | 指定元素动画化的路径。默认值为 none。 |
| offset-position | 指定元素沿路径的初始位置。默认值为 normal。 |
| offset-rotate | 指定元素沿路径动画化时的旋转角度。默认值为 auto。 |
| initial | 将此属性设置为其默认值。参阅 initial。 |
| inherit | 从其父元素继承此属性。参阅 inherit。 |
| 默认值： | See the default value for the individual properties |
|---|---|
| 继承性： | 否 |
| 动画制作： | 支持。请参阅：动画相关属性。 |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.offset="path('M 50,250 C 700,-50 -400,-50 250,250') 200px auto 90deg" |
表格中的数字表示首个完全支持该属性的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 55 | 79 | 72 | 16 | 42 |
教程：SVG 路径
教程：CSS 动画
参考：CSS offset 属性
参考：CSS offset-anchor 属性
参考：CSS offset-distance 属性
参考：CSS offset-path 属性
参考：CSS offset-position 属性
参考：CSS offset-rotate 属性
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共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万人学习
