ฟังก์ชัน ray() ของ CSS

การกำหนดและการใช้งาน

CSS ray() ฟังก์ชันนี้กำหนดเส้นทางตายอนที่อนุญาตให้องค์ประกอบทางอนุการตายอนตามตามที่กำหนด

ray() ฟังก์ชันกับ offset-path ตั้งค่าคุณสมบัติใช้ร่วมกัน

ตัวอย่าง

ตัวอย่าง 1

มุมมองต่างๆของกระแสชนะ

#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);
}

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ใช้ offset-path และ ray() ทำให้เกิดปรากฎการณ์การเคลื่อนไหว

 #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%; }
}

ทดลองด้วยตัวเอง

CSS ภาษา

ray(angle size contain at position)
ค่า การอธิบาย
angle จำเป็น。กำหนดทิศทาง/มุมของกระแส
size

เลือกตั้งได้。กำหนดความยาวของกระแส，คือระยะทางจาก offset-distance 0% ถึง 100% ของกล่องที่มีองค์ประกอบ

มันยอมรับค่าที่เป็นคำศัพท์หนึ่งในนี้：

  • closest-side - (ค่าเริ่มต้น) ระยะทางจากจุดเริ่มต้นของกระแสถึงขอบที่ใกล้ที่สุดของกล่องที่มีองค์ประกอบ
  • closest-corner - ระยะทางจากจุดเริ่มต้นของกระแสถึงมุมที่ใกล้ที่สุดของกล่องที่มีองค์ประกอบ
  • farthest-side - ระยะทางจากจุดเริ่มต้นของกระแสถึงขอบที่ไกลที่สุดของกล่องที่มีองค์ประกอบ
  • farthest-corner - ระยะทางจากจุดเริ่มต้นของกระแสถึงมุมที่ไกลที่สุดของกล่องที่มีองค์ประกอบ
  • sides - ระยะทางจากจุดเริ่มต้นของกระแสถึงจุดที่กระแสและขอบของกล่องที่มีองค์ประกอบสัมผัสกัน
contain เลือกตั้งได้。ย่อความยาวของกระแสเพื่อให้องค์ประกอบยังคงอยู่ในกล่องที่มีองค์ประกอบแม้ว่า offset-distance: 100% ก็ตาม。
at position

เลือกตั้งได้。กำหนดจุดเริ่มต้นของกระแสและตำแหน่งขององค์ประกอบในกล่องที่มีองค์ประกอบ。

ถ้าละเลย จะใช้ค่า offset-position ขององค์ประกอบ。

ถ้าองค์ประกอบไม่มีค่า offset-position รับองค์ประกอบจะถูกจัดลงในกล่องที่มีองค์ประกอบ (คือ 50% 50%)。

รายละเอียดเทคนิค

เวอร์ชั่น： CSS Motion Path Module Level 1

การสนับสนุนของเบราวเซอร์

ตัวเลขในตารางแสดงความสามารถในการสนับสนุนฟังก์ชันของเวอร์ชั่นบราวเซอร์ที่สนับสนุนอย่างเต็มที่แรก。

เชิร์โม เอดจ์ ไฟร็อกซ์ เซฟารี่ โอเปร่า
116 116 122 17 102

หน้าที่เกี่ยวข้อง

อ้างอิง:offset-path ทางนิยาย