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

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

Bramus

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

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

ภาพเคลื่อนไหวของเส้นขอบโดยใช้ outline-offset โดย Kevin J. Powell

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

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

Border Animations using generated content โดย 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

Browser Support

• 1
• 12
• 4
• 3

Source

ไม่ควรทำ

/* 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 วิธีนี้จะทำให้ระบบไม่วาดพื้นหลังใต้พื้นที่ของเส้นขอบอีกต่อไป

Browser Support

• 1
• 12
• 4
• 5

Source

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 ช่วยให้การดำเนินการนี้เป็นเรื่องง่ายในเบราว์เซอร์ที่รองรับ

Browser Support

• 85
• 85
• 128
• 16.4

Source

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

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

เมื่อรวมทั้งหมดเข้าด้วยกัน โค้ดจะเป็นดังนี้

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

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

Browser Support

• 16
• 12
• 15
• 6

Source

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

/* 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 มีความเป็นไปได้มากมาย คุณอาจเลือกใช้แบบใดแบบหนึ่ง ทั้งนี้ขึ้นอยู่กับกรณีการใช้งาน