เครื่องกำเนิดเส้นขอบไล่ระดับสีแบบเคลื่อนไหว CSS

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

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

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

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