码农教程 - 一技在手,衣食无忧! tools

目录

CSS offset 属性

❮上一节 完整的CSS参考 下一节❯

示例

使用 offset 简写属性设置 <img> 元素上的 offset-path、offset-distance 和 offset-rotate 属性值：

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px auto 45deg;
}
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个offset属性在沿路径对元素进行动画处理时使用，并且是以下属性的简写属性：

* 目前仅适用于 Firefox 浏览器

对于不同的设置方式offset属性值，请参阅下面的 "More Examples"。

默认值： 查看各个属性的默认值
遗传： 不
可动画： 是的。阅读可动画的尝试一下
版本： CSS3
JavaScript 语法： 对象.style.offset="path('M 50,250 C 700,-50 -400,-50 250,250') 200px auto 90deg"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
offset 55.0 79.0 72.0 16.0 42.0

CSS 语法

offset: auto| value|initial|inherit;

属性值

Value Description
auto Default. See default value for each individual 'offset-' property.
offset-anchor Specifies the point on an element that is fixed to the path it is animated along.
offset-distance Specifies the distance from the start of the path defined by offset-path.
offset-path Specifies the path an element is animated along.
offset-rotate Specifies rotation of an element as it is animated along a path
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

偏移路径和偏移旋转

使用 <img> 元素的 offset 属性来设置 offset-path 和 offset-rotate 属性值：

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 45deg;
}
亲自试一试 »

偏移路径和偏移距离

使用 <img> 元素的 offset 属性来设置 offset-path 和 offset-distance 属性值：

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px;
}
亲自试一试 »

偏移路径、偏移距离、偏移旋转和偏移锚点

使用 <img> 元素的 offset 属性来设置 offset-path、offset-distance、offset-rotate 和 offset-anchor 属性值：

笔记：由于 offset-anchor 属性，此示例目前仅适用于 Firefox 浏览器。

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px -90deg / 0% 50%;
}
亲自试一试 »

相关页面

HTML SVG 教程：SVG路径

CSS教程：CSS 动画

CSS 偏移锚点属性：CSS Offset-anchor 属性

CSS 偏移距离属性：CSS 偏移距离属性

CSS 偏移路径属性：CSS 偏移路径属性

CSS 偏移旋转属性：CSS 偏移旋转属性


❮上一节 完整的CSS参考 下一节❯