Hàm ray() trong CSS

Định nghĩa và cách sử dụng

CSS ray() Hàm định nghĩa đoạn đường theo hướng đường ray mà phần tử động nên tuân theo, được gọi là 'tia'. Tia bắt đầu từ vị trí di chuyển và mở rộng theo hướng góc được chỉ định.

ray() Hàm với offset-path Thuộc tính được sử dụng cùng nhau.

Thực hành

Ví dụ 1

Tia射 từ các góc độ khác nhau:

#square1 {
  width: 65px;
  height: 65px;
  background: yellow;
  offset-position: bottom right;
  offset-path: ray(45deg);
}
#square2 {
  width: 65px;
  height: 65px;
  background: pink;
  offset-position: top right;
  offset-path: ray(-25deg);
}
#square3 {
  width: 65px;
  height: 65px;
  background: salmon;
  offset-position: bottom left;
  offset-path: ray(90deg);
}

Thử nghiệm trực tiếp

ví dụ 2

sử dụng offset-path và ray() Thực hiện hiệu ứng động:

 #frameDiv {
  width: 200px;
  height: 200px;
  margin: 20px;
  position: relative;
  border: solid black 1px;
  background-color: rgb(205, 242, 205);
}
#frameDiv > div {
  width: 50px;
  height: 50px;
  background-color: hotpink;
  offset-path: ray(45deg);
  animation: moveDiv 3s 3;
}
@keyframes moveDiv {
  100% { offset-distance: 100%; }
}

Thử nghiệm trực tiếp

Ngữ pháp CSS

ray(angle size contain at position)
Giá trị Mô tả
angle Bắt buộc. Định nghĩa hướng/dạng góc của tia.
size

Tùy chọn. Định nghĩa độ dài của tia, tức là khoảng cách từ offset-distance 0% đến 100% so với khung chứa.

Nó chấp nhận một trong các giá trị từ khóa sau:

  • closest-side - (Mặc định) Khoảng cách từ điểm bắt đầu của tia đến cạnh gần nhất của khối chứa.
  • closest-corner - Khoảng cách từ điểm bắt đầu của tia đến góc gần nhất của khối chứa.
  • farthest-side - Khoảng cách từ điểm bắt đầu của tia đến cạnh xa nhất của khối chứa.
  • farthest-corner - Khoảng cách từ điểm bắt đầu của tia đến góc xa nhất của khối chứa.
  • sides - Khoảng cách từ điểm bắt đầu của tia đến điểm giao nhau giữa đoạn và cạnh giới hạn của khối chứa.
contain Tùy chọn. Giảm độ dài của tia để đảm bảo rằng yếu tố vẫn ở trong khối chứa ngay cả khi offset-distance: 100%.
at position

Tùy chọn. Định nghĩa điểm bắt đầu của tia và vị trí đặt yếu tố trong khối chứa.

Nếu bỏ qua, sẽ sử dụng giá trị offset-position của yếu tố.

Nếu yếu tố không có giá trị offset-position, yếu tố sẽ được đặt ở trung tâm của khối chứa (tức là 50% 50%).

Chi tiết kỹ thuật

Phiên bản: Mô đun CSS Motion Path Module Level 1

Hỗ trợ trình duyệt

Số liệu trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ hàm đó.

Chrome Edge Firefox Safari Opera
116 116 122 17 102

Trang liên quan

Tham khảo:Thuộc tính offset-path