CSS motion path

Module CSS motion path cho phép tác giả tạo hoạt ảnh cho bất kỳ đối tượng đồ họa nào dọc theo một đường dẫn tùy chỉnh.

Module CSS transforms cung cấp các tính năng cho phép các hộp được định vị lại, xoay, thu phóng và nghiêng so với vị trí bố cục của nó, mà không làm gián đoạn bố cục của bất kỳ phần tử nào khác trên trang. Các transform này có thể được tạo hoạt ảnh và chuyển tiếp, nhưng chỉ theo những cách tương đối cơ bản.

Các tính năng của module CSS motion path cung cấp các offset transform: các transform căn chỉnh một điểm trên phần tử với một khoảng cách offset dọc theo một offset path, tùy chọn xoay phần tử đã được transform để theo hướng đường dẫn. Module này cho phép các khả năng transform mạnh mẽ, ví dụ:

Định vị sử dụng tọa độ cực thay vì giới hạn transformation trong tọa độ transform hình chữ nhật tiêu chuẩn.
Tạo hoạt ảnh cho một phần tử dọc theo một đường dẫn đã xác định.

CSS motion path cho phép định nghĩa các chuyển đổi không gian 2D phức tạp bằng cách tận dụng các hàm shape CSS.

Ví dụ, bạn có thể định nghĩa một đường dẫn cụ thể với bất kỳ hình dạng nào bạn muốn với thuộc tính offset-path. Sau đó bạn có thể tạo hoạt ảnh cho một phần tử để di chuyển dọc theo đường dẫn đó bằng cách tạo hoạt ảnh thuộc tính offset-distance, và xoay nó tại bất kỳ điểm nào với thuộc tính offset-rotate.

Motion path trong thực tế

<div id="heart">
  <div id="motion-demo"></div>
</div>

#motion-demo {
  offset-path: path(
    "M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
  );
  animation: move 3000ms infinite linear;
  width: 10px;
  height: 10px;
  background: red;
}

#heart {
  width: 200px;
  height: 200px;
  background-color: lightpink;
  clip-path: path(
    "M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
  );
}

@keyframes move {
  100% {
    offset-distance: 100%;
  }
}

Trong ví dụ này, chúng ta đã sử dụng CSS masking và CSS shapes để cắt một container có nền hồng nhạt thành hình trái tim. Chúng ta đã sử dụng hàm path() làm giá trị của thuộc tính clip-path. Con của nó là một hộp đỏ 10px x 10px được làm cho theo dọc cạnh của phần tử cha. Chúng ta đã làm điều này bằng cách sử dụng cùng <basic-shape> làm đường dẫn, đặt thuộc tính offset-path của hộp thành cùng giá trị hàm path(). Chúng ta đã sử dụng CSS animations để thay đổi offset-distance từ 0% đến 100% trong ba giây.