Các offset-anchorbất động sản xác định một điểm trong hộp nó được áp dụng như neo đó di chuyển dọc theo offset-path.
Điều đó hơi dài dòng, vì vậy hãy chia nhỏ nó ra một chút.
Bạn có một phần tử, hãy nói một hộp:
Xem Hộp bút màu cam của Geoff Graham (@geoffgraham) trên CodePen.
Bạn muốn hộp đó di chuyển dọc theo một con đường, chẳng hạn như một đường nguệch ngoạc. Chúng ta có thể tạo dòng đó với SVG trực tiếp trong HTML và sử dụng nó làm dòng offset-pathcho hộp. Chúng tôi tạo hoạt ảnh bằng cách sử dụng thuộc offset-distancetính:
Xem Hình vuông Pen Orange trên Con đường của Geoff Graham (@geoffgraham) trên CodePen.
Tốt tốt. Nhưng điều gì sẽ xảy ra nếu chúng ta muốn chiếc hộp trông giống như nó đang treo ngược dòng? Bạn biết đấy, giống như một người trượt theo đường zip.
Đó là nơi offset-anchorđi vào! Nó đánh dấu một điểm trên phần tử và sử dụng vị trí đó để định vị phần tử trên đường dẫn.
Đây là một ví dụ trong đó ba hộp khác nhau được gắn vào cùng một đường dẫn tại các điểm neo khác nhau:
Xem Pen NMbEpy của Geoff Graham (@geoffgraham) trên CodePen.
Cú pháp
.box ( offset-anchor: (auto | ); )Giá trị
auto: Lấy giá trịoffset-positionmiễn là giá trị đó không phảiautovà miễn làoffset-pathđược đặt thànhnone.position: Một đơn vị được tính từ chiều rộng và chiều cao tương đối của vùng chứa mà nó nằm trong đó. Ví dụ:50% 50%sẽ là tâm cụt. Lưu ý rằng các từ khóa hoạt động ở đây, giống nhưbackground-positionnơicenter centersẽ trả về cùng một kết quả.: Một đơn vị bù trừ neo từ góc trên bên trái của hộp phần tử.
Cần lưu ý rằng đó positionlà một tài sản có thể hoạt hình.
Hỗ trợ trình duyệt
Các offset-*thuộc tính vẫn được coi là một tính năng thử nghiệm tại thời điểm viết bài này. Nếu việc thiếu hỗ trợ trình duyệt hiện tại khiến bạn do dự khi sử dụng nó trong một dự án, thì bạn có thể muốn xem xét sử dụng GSAP cho mức hoạt ảnh này. Điều này sẽ cung cấp cho bạn hỗ trợ trình duyệt rộng nhất tại thời điểm này.
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 46 | 72 | Không | 79 | Không |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Không |
Kể từ Chrome 46 và Opera 33 (và các phiên bản di động liên quan), chúng tôi có "hỗ trợ ban đầu" trong Blink (không có cờ).
thông tin thêm
- Đặc điểm kỹ thuật mô-đun đường dẫn chuyển động cấp 1
- Vé WebKit # 139128
- Vé Mozilla số 1186329
- Yêu cầu tính năng của Microsoft Edge