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

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

Bramus

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

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

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

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

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

เก็บโมเดลกล่องไว้

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

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

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

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

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

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

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

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

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

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