ภาพเคลื่อนไหวเส้นขอบ CSS

ดูวิธีต่างๆ ในการทำให้เส้นขอบเคลื่อนไหวใน CSS

บรามูส

ตั้งค่าเส้นขอบ

การกำหนดเส้นขอบในองค์ประกอบทำได้หลายวิธี: border, outline และ box-shadow ตามที่อธิบายไว้ใน The 3 CSS Methods for Add Element Borders โดย Stephanie Eckles แต่ละวิธีจะมีทั้งข้อดีและข้อเสียของตัวเอง โดยเฉพาะเมื่อพูดถึงการทำให้เส้นขอบเคลื่อนไหว เหตุผลหลักที่ไม่ใช้ CSS border ที่เหมาะสมคือเพื่อจุดประสงค์ด้านภาพเคลื่อนไหว

ภาพเคลื่อนไหวชายแดนที่ใช้ outline-offset โดย Kevin J. พาวเวล

บทความที่ดึงดูดความสนใจของฉันเมื่อเร็วๆ นี้คือ Fantastic BorderAnimation Border Animation ซึ่ง Coco ได้สำรวจตัวเลือกอื่นๆ เพิ่มเติม โดยการแทรกเนื้อหาที่สร้างโดยใช้ ::before และ ::after จะทำให้สร้างเส้นขอบปลอมซึ่งจะทำให้เคลื่อนไหวได้

สิ่งที่โดดเด่นที่สุดคือการแสดงภาพภาพเคลื่อนไหวสนับสนุนที่ใช้ในบทความนี้ ระบบช่วยอธิบายสิ่งที่กำลังทำอยู่เพื่อให้บรรลุผลลัพธ์ที่ต้องการ

ภาพเคลื่อนไหวชายแดนโดยใช้เนื้อหาที่ Coco สร้างขึ้น

ทั้งเลเยอร์สีขาวและเส้นสีเป็นเนื้อหาที่สร้างขึ้น การเฟดเลเยอร์สีขาวเข้าและออกจะทำให้เห็นวิธีการซ้อนและวิธีการทำงานของภาพเคลื่อนไหวได้อย่างชัดเจน

การคงโมเดลแบบกล่องไว้

ข้อเสียของการใช้ "เนื้อหาที่สร้างขึ้น" เพื่อเลียนแบบเส้นขอบก็คือการทำโมเดลกล่องเสีย ซึ่งตอนนี้เนื้อหาสามารถบังขอบปลอมได้เนื่องจากมีการเขียน "เส้นขอบ" ไว้ข้างใต้ คุณต้องใช้ border-width ที่ต้องการเป็น padding เพื่อบรรเทาปัญหา

เพื่อให้มีเส้นขอบที่แท้จริง และยังคงลักษณะของโมเดลกล่องไว้ คุณสามารถใช้พื้นหลังหลายพื้นหลังซึ่งคุณขยายออกไปให้อยู่ภายในพื้นที่ชายแดนได้

ข้อมูลพื้นฐาน

เริ่มต้นด้วยการสร้างเส้นขอบจุดและเพิ่มพื้นหลังหลายๆ แบบ

/* Size of the border */
--border-size: 0.5rem;

/* Create a dotted border */
border: var(--border-size) dotted lime;

/* Create two background layers:
   1. A white semi-transparent
   2. A layer with the colored boxes
 */
background-image:
  linear-gradient(to right, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.5)),

  conic-gradient(
    from 45deg,
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  )
;

ปรับขนาดพื้นหลังด้วย background-origin

คุณจะเห็นได้ว่ามีบางอย่างตลกๆ ที่เกิดขึ้นในพื้นหลังที่นี่ กล่าวคือ องค์ประกอบถูกวาดลงในขอบ แต่ดูเหมือนว่า conic-gradient ทำงานผิดทั้งหมด จริงๆ แล้วนี่คือลักษณะการทำงานที่ต้องการ: โดยค่าเริ่มต้นแล้วภาพพื้นหลังจะไม่วาดลงในขอบเนื่องจากต้นฉบับคือ padding-box ขององค์ประกอบ ในการสร้างเส้นขอบ ภาพพื้นหลังที่ตั้งไว้จะถูกนำมาใช้ซ้ำในขอบ ทำให้ได้เอฟเฟ็กต์ภาพที่แปลกประหลาด

หากต้องการแก้ไขปัญหานี้ คุณต้องขยายพื้นหลังออกเพื่อให้ใช้ขนาดของเส้นขอบด้วย ซึ่งทำด้วยตนเองได้โดยการยืดและจัดตำแหน่งพื้นหลังใหม่ แต่การใช้พร็อพเพอร์ตี้ background-origin เพื่อปรับขนาดพื้นหลังให้สอดคล้องกับ border-box

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

• 1
• 12
• 4
• 3

แหล่งที่มา

ไม่ควรทำ

/* Manually add or offset the size of the border where needed */
background-position: calc(var(--border-size) * -1) calc(var(--border-size) * -1);
background-size: calc(var(--border-size) * 2 + 100%) calc(var(--border-size) * 2 + 100%);

ควรทำ

background-origin: border-box;

การเพิ่มนี้ทำให้ทุกอย่างดูดีขึ้นมาก:

การย่อเลเยอร์พื้นหลังสีขาวด้วย background-clip

เนื่องจากตอนนี้พื้นหลังกินพื้นที่ทั้งหมด เลเยอร์กึ่งโปร่งใสจึงต้องลดพื้นที่ลงอีกครั้ง แทนที่จะต้องมายุ่งกับ background-size อีกครั้ง มีวิธีที่ง่ายกว่าคือใช้ background-clip แล้วตั้งค่าเป็น padding-box ด้วยวิธีนี้ จะไม่มีการวาดพื้นหลังใต้พื้นที่ของขอบอีกต่อไป

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

• 1
• 12
• 4
• 5

แหล่งที่มา

background-clip:
  padding-box, /* Clip white semi-transparent to the padding-box */
  border-box /* Clip colored boxes to the border-box (default) */
;

สุดท้าย สร้างเส้นขอบ transparent เพื่อให้มีผลสมบูรณ์

border: 0.3rem dotted transparent;

แอนิเมชัน

หากต้องการคืนค่าภาพเคลื่อนไหวของเส้นขอบ คุณสามารถปรับมุมเริ่มต้นของ conic-gradient

--angle: 0deg;
conic-gradient(
  from var(--angle),
  #d53e33 0deg 90deg,
  #fbb300 90deg 180deg,
  #377af5 180deg 270deg,
  #399953 270deg 360deg
);

@property เรื่องนี้จึงกลายเป็นเรื่องง่ายในเบราว์เซอร์ที่รองรับ

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

• 85
• 85
• 16.4

แหล่งที่มา

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

เมื่อนำมารวมกันแล้ว โค้ดจะกลายเป็นดังนี้

เนื้อหาโบนัส: border-image

วิธีการวาดเส้นขอบการไล่ระดับสีที่ก่อนหน้านี้ครอบคลุมคือการใช้ CSS border-image

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

• 16
• 12
• 15
• 6

แหล่งที่มา

ทำให้โค้ดง่ายขึ้นเนื่องจากคุณไม่จำเป็นต้องจัดการกับพื้นหลังที่ทับซ้อนกัน คุณสามารถใช้ภาพเคลื่อนไหวในลักษณะเดียวกันกับก่อนหน้านี้ได้

/* Create a border */
border: 0.5rem solid transparent;

/* Paint an image in the border */
border-image:
  conic-gradient(
    from var(--angle),
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  ) 1
;

อย่างไรก็ตาม คุณจะเห็นว่ามีบางอย่างใช้แนวทางนี้ไม่ได้อีกต่อไป

• border-image ไม่เป็นไปตาม border-radius โดยจะเป็นสี่เหลี่ยมผืนผ้าเสมอ
• เมื่อตั้งค่า border-image-slice เป็นเติมสี จะไม่มีการระบายสี border-image ภายใต้ชุด background แต่แสดงอยู่ด้านบน การทำเช่นนี้อาจเป็นเรื่องยุ่งยากหากคุณต้องการให้พื้นหลังเป็นแบบกึ่งโปร่งใส

กำลังปิด

มีหลายความเป็นไปได้ที่ทำให้เส้นขอบเคลื่อนไหวใน CSS คุณอาจใช้อย่างใดอย่างหนึ่ง ทั้งนี้ขึ้นอยู่กับกรณีการใช้งาน