CSS offset 屬性
示例
使用 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 屬性，它是以下屬性的簡寫：
有關設定 offset 屬性值的不同方法，請參閱下面的“更多示例”。
| 預設值 | 檢視各個屬性的預設值 |
|---|---|
| 繼承 | no |
| 可動畫 | 是。 閱讀關於可動畫屬性 試試看 |
| 版本 | CSS3 |
| JavaScript 語法 | object.style.offset="path('M 50,250 C 700,-50 -400,-50 250,250') 200px auto 90deg" 試試看 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| offset | 55 | 79 | 72 | 16 | 42 |
CSS 語法
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 |
更多示例
offset-path 和 offset-rotate
使用 <img> 元素的 offset 屬性來設定 offset-path 和 offset-rotate 屬性值
img {
offset: path('M 50 80 C 150 -20 250 180 350 80') 45deg;
}
自己動手試一試 »
offset-path 和 offset-distance
使用 <img> 元素的 offset 屬性來設定 offset-path 和 offset-distance 屬性值
img {
offset: path('M 50 80 C 150 -20 250 180 350 80') 150px;
}
自己動手試一試 »
offset-path、offset-distance、offset-rotate 和 offset-anchor
使用 <img> 元素的 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%;
}
自己動手試一試 »
相關頁面
HTML SVG 教程：SVG 路徑
CSS 教程：CSS 動畫
CSS offset-anchor 屬性：CSS Offset-anchor 屬性
CSS offset-distance 屬性：CSS Offset-distance 屬性
CSS offset-path 屬性：CSS Offset-path 屬性
CSS offset-rotate 屬性： CSS offset-rotate 屬性
