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

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

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

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

บทความที่ดึงดูดความสนใจของฉันเมื่อเร็วๆ นี้คือภาพเคลื่อนไหวเส้นขอบ CSS ที่ยอดเยี่ยม ซึ่งผู้เขียน 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

การรองรับเบราว์เซอร์

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 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 แทนได้ วิธีนี้จะทำให้ระบบไม่วาดพื้นหลังใต้พื้นที่ของเส้นขอบอีกต่อไป

การรองรับเบราว์เซอร์

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 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 ช่วยให้การดำเนินการนี้ง่ายขึ้นมากในเบราว์เซอร์ที่รองรับ

การรองรับเบราว์เซอร์

  • Chrome: 85
  • Edge: 85
  • Firefox: 128
  • Safari: 16.4

แหล่งที่มา

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

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

เมื่อรวมทั้งหมดแล้ว รหัสจะกลายเป็นดังนี้

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

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

การรองรับเบราว์เซอร์

  • Chrome: 16.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 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 ทำได้หลายวิธี คุณอาจใช้อย่างใดอย่างหนึ่ง ทั้งนี้ขึ้นอยู่กับกรณีการใช้งาน