เครื่องมือสร้างเส้นขอบไล่ระดับแบบเคลื่อนไหวด้วย CSS

เส้นขอบรุ้งที่หมุนได้ดูเรียบง่ายจนกว่าคุณจะลองสร้างด้วย CSS จริง ๆ: การ animate มุมภายใน conic-gradient() ด้วย custom property ธรรมดาไม่ช่วยอะไร เพราะเบราว์เซอร์ไม่รู้ว่าค่านั้นเป็นมุมและไม่สามารถประมาณค่าระหว่าง 0deg ถึง 360deg — มันแค่กระโดด เครื่องมือนี้ใช้วิธีแก้ที่ถูกต้องคือ CSS Properties and Values API: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` บอกเบราว์เซอร์อย่างชัดเจนว่า custom property นั้นเก็บค่าชนิดใด ซึ่งปลดล็อกการประมาณค่าที่ราบรื่นและเร่งด้วย GPU ผ่านกฎ @keyframes

ตัววงแหวนเองคือ pseudo-element ::before ที่มีขนาดใหญ่กว่ากล่อง (ขยายเข้าไปจากขอบด้วยค่าความกว้างเส้นขอบติดลบ) โดยมีพื้นหลังตั้งเป็น `conic-gradient(from var(--border-angle), ...)` วนกลับไปสีแรกเพื่อให้การไล่ระดับไม่มีรอยต่อที่มองเห็นได้ จากนั้น mask จะทำหน้าที่สร้างรูปร่างที่แท้จริง: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` คงไว้เฉพาะส่วนต่างรูปวงแหวนระหว่าง padding-box และ content-box ละทิ้งสี่เหลี่ยมไล่ระดับทึบนอกนั้น ส่วน `-webkit-mask-composite: xor` แบบเก่าของ Safari ทำงานเหมือนกันและถูกส่งมาควบคู่กับ property มาตรฐาน ดังนั้นเอฟเฟกต์จึงแสดงผลสม่ำเสมอแทนที่จะล้มเหลวเงียบ ๆ ในเอนจินเดียว

การรองรับ border-radius ไม่ใช่ของที่เติมทีหลัง — `border-radius: inherit` ของ pseudo-element หมายความว่ารัศมีใดก็ตามที่คุณตั้งในกล่องจะถูกถ่ายทอดไปยังวงแหวนโดยอัตโนมัติ ดังนั้นปุ่มทรงแคปซูลหรือการ์ดมนจะได้เส้นขอบเรืองแสงที่มนตามแทนที่จะเป็นขอบตรงทะลุออกมาจากมุมโค้ง ทดลองสดได้: ลากตัวเลื่อนรัศมีจากสี่เหลี่ยมคมไปจนถึงแคปซูลเต็มแล้วดูวงแหวนตามรูปร่างในทุกขั้นตอน ซึ่งคือรายละเอียดที่แยกการใช้งานจริงของเทคนิคนี้ออกจากภาพหน้าจอปลอม

ทุกอย่างอื่นในหน้านี้เชื่อมโยงกับโค้ดที่สร้างขึ้นโดยตรง: ตัวเลื่อนความกว้างคือความหนาของวงแหวนและค่า inset/padding ของ pseudo-element, ตัวเลื่อนระยะเวลาคือ animation-duration ของ @keyframes, สวิตช์ทิศทางเพียงกลับเครื่องหมายของมุมสิ้นสุด keyframe (+360deg หรือ -360deg) และแต่ละจุดสีคือรายการที่คั่นด้วยจุลภาคภายในการเรียก conic-gradient() ทั้งหมดทำงานในเบราว์เซอร์ของคุณโดยไม่มีรูปภาพ ไม่มีลูป animation ที่ขับเคลื่อนด้วย JavaScript และไม่มีบริการภายนอก — คัดลอกบล็อก CSS แล้วมันจะหมุนต่อไปทุกที่ที่คุณวาง