Thuộc tính đường dẫn bù CSS
Ví dụ
Tạo đường dẫn cho <div> hoạt ảnh đi theo:
div {
offset-path: path('M20,170 L100,20 L180,100 Z');
animation: moveDiv 3s 3;
}
@keyframes moveDiv {
100% { offset-distance: 100%; }
}
Hãy tự mình thử »Định nghĩa và cách sử dụng
Thuộc tính offset-path
tạo đường dẫn cho phần tử hoạt hình đi theo.
Lưu ý: Hiện tại, chỉ path()
và none
giá trị nào được hỗ trợ cho thuộc tính offset-path
.
Giá trị mặc định: | không có |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | Đúng. Đọc về hoạt hình Hãy thử nó |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | object .style.offsetPath="path('M20,170 L100,20 L180,100 Z')" Hãy thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
offset-path | 55.0 | 79.0 | 72.0 | 15.4 | 45.0 |
Cú pháp CSS
offset-path: none| value |initial|inherit;
Giá trị tài sản
Value | Description |
---|---|
none | Default. The element's default offset-path property value. |
path() | Specify a path in SVG syntax. Learn about SVG paths |
ray() | Currently not supported. Specify a path with the CSS ray() function. |
url() | Currently not supported. Specify a path by using the URL to an SVG file. |
<basic-shape> | Currently not supported. Specify a path by defining a basic shape using CSS functions like inset(), circle(), ellipse() or polygon(). |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Trang liên quan
Hướng dẫn SVG HTML: Đường dẫn SVG
Hướng dẫn CSS: Hoạt hình CSS
Thuộc tính CSS offset: Thuộc tính CSS Offset
Thuộc tính CSS offset-anchor: Thuộc tính CSS Offset-anchor
Thuộc tính khoảng cách bù đắp CSS: Thuộc tính khoảng cách bù đắp CSS
Thuộc tính xoay offset của CSS: Thuộc tính CSS Offset-rotate