ดูวิธีต่างๆ ในการแสดงภาพเคลื่อนไหวของเส้นขอบใน CSS
การตั้งค่าเส้นขอบ
การตั้งค่าเส้นขอบในองค์ประกอบทำได้ 2-3 วิธี ได้แก่ border
, outline
และ box-shadow
ดังที่อธิบายไว้ในเมธอด CSS 3 รายการสำหรับเพิ่มเส้นขอบขององค์ประกอบโดย 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 ทำได้หลายวิธี คุณอาจใช้อย่างใดอย่างหนึ่ง ทั้งนี้ขึ้นอยู่กับกรณีการใช้งาน