CSS الرسوم المتحركة مولد الحدود التدرج

تبدو حدود قوس قزح الدوارة بسيطة حتى تحاول فعليًا إنشاء واحدة في CSS: تحريك زاوية داخل conic-gradient() باستخدام خاصية مخصصة عادية لا يفعل شيئًا مفيدًا، لأن المتصفح ليس لديه أي فكرة أن القيمة هي زاوية ولا يمكنه الاستيفاء بين 0deg و 360deg - فهو يقفز فقط. يستخدم هذا المولد الإصلاح الحقيقي، واجهة برمجة تطبيقات خصائص وقيم CSS: `@property --border-angle { Syntax: '<angle>'; القيمة الأولية: 0deg؛ يرث: كاذب؛ }` يخبر المتصفح بالضبط بنوع القيمة التي تحملها الخاصية المخصصة، وهو ما يفتح استيفاء سلسًا وصديقًا لوحدة معالجة الرسومات عبر قاعدة @keyframes.

الحلقة نفسها عبارة عن :: قبل حجم العنصر الزائف أكبر من الصندوق (مدرج ناقص عرض الحدود) مع تعيين خلفيتها على `التدرج المخروطي (من var(--border-angle)، ...)` والتكرار مرة أخرى إلى اللون الأول بحيث لا يكون لعملية المسح أي خط مرئي. يقوم القناع بعد ذلك بعمل التشكيل الحقيقي: `mask: Liner-gradient(#000 0 0) content-box, Linear-gradient(#000 0 0); قناع مركب: استبعاد؛` يحتفظ فقط بالفرق على شكل حلقة بين مربع الحشو ومربع المحتوى، ويتجاهل مستطيل التدرج الصلب في كل مكان آخر. يقوم `-webkit-mask-composite: xor` الأقدم في Safari بتنفيذ نفس العملية ويتم شحنه جنبًا إلى جنب مع الخاصية القياسية، لذلك يتم عرض التأثير بشكل متسق بدلاً من الفشل بصمت على محرك واحد.

دعم نصف القطر الحدودي ليس فكرة لاحقة مثبتة في الأعلى - "نصف القطر الحدودي: وراثة" للعنصر الزائف يعني أن أي نصف قطر تطلبه في الصندوق يتم نقله إلى الحلقة تلقائيًا، لذلك يحصل الزر على شكل حبة أو بطاقة مستديرة على حد متوهج دائري بدلاً من الحواف المستقيمة التي تنزف من الزوايا المنحنية. اختبرها مباشرة: اسحب شريط تمرير نصف القطر من مستطيل حاد إلى قرص كامل وشاهد الحلقة تتبع الشكل في كل خطوة، وهي التفاصيل التي تفصل بين التنفيذ الحقيقي لهذه التقنية ولقطة الشاشة المزيفة.

يتم تعيين كل شيء آخر على الصفحة مباشرة على الكود الذي تم إنشاؤه: شريط تمرير العرض هو سمك الحلقة وإدراج/حشوة العنصر الزائف، وشريط تمرير المدة هو مدة الرسوم المتحركة @keyframes، ومفتاح الاتجاه يقلب فقط علامة زاوية نهاية الإطار الرئيسي (+360 درجة أو -360 درجة)، وكل توقف لوني هو إدخال مفصول بفاصلة داخل استدعاء conic-gradient(). يتم تشغيل كل شيء في متصفحك بدون صور، ولا حلقة رسوم متحركة تعتمد على JavaScript ولا خدمات خارجية - انسخ كتلة CSS وستستمر في الدوران أينما قمت بلصقها.