सीएसएस एनिमेटेड ग्रेडिएंट बॉर्डर जेनरेटर

एक घूमता हुआ इंद्रधनुष बॉर्डर तब तक सरल दिखता है जब तक आप वास्तव में सीएसएस में एक बनाने का प्रयास नहीं करते: एक सादे कस्टम प्रॉपर्टी के साथ शंकु-ग्रेडिएंट () के अंदर एक कोण को एनिमेट करने से कुछ भी उपयोगी नहीं होता है, क्योंकि ब्राउज़र को पता नहीं होता है कि मान एक कोण है और 0deg और 360deg के बीच इंटरपोल नहीं कर सकता है - यह बस कूदता है। यह जनरेटर वास्तविक फिक्स, सीएसएस गुण और मान एपीआई का उपयोग करता है: `@property --border-कोण { वाक्यविन्यास: '<कोण>'; प्रारंभिक-मान: 0डिग्री; विरासत में मिला: झूठा; }` ब्राउज़र को सटीक रूप से बताता है कि कस्टम प्रॉपर्टी किस प्रकार का मूल्य रखती है, जो @keyframes नियम में सुचारू, GPU-अनुकूल इंटरपोलेशन को अनलॉक करती है।

रिंग अपने आप में एक ::before छद्म-तत्व है जिसका आकार बॉक्स से बड़ा है (सीमा की चौड़ाई घटाकर इनसेट) और इसकी पृष्ठभूमि `शंकु-ढाल (var(--border-कोण), ...)` पर सेट है जो पहले रंग में वापस लूपिंग करती है ताकि स्वीप में कोई दृश्यमान सीम न हो। एक मुखौटा तब वास्तविक आकार देने का काम करता है: `मुखौटा: रैखिक-ग्रेडिएंट (#000 0 0) सामग्री-बॉक्स, रैखिक-ग्रेडिएंट (#000 0 0); मास्क-कंपोजिट: बहिष्कृत; पैडिंग-बॉक्स और कंटेंट-बॉक्स के बीच केवल रिंग-आकार का अंतर रखता है, बाकी सभी जगहों पर ठोस ग्रेडिएंट आयत को हटा देता है। सफ़ारी का पुराना `-वेबकिट-मास्क-कंपोजिट: एक्सओआर` समान संचालन करता है और मानक संपत्ति के साथ जहाज करता है, इसलिए प्रभाव एक इंजन पर चुपचाप विफल होने के बजाय लगातार प्रस्तुत होता है।

बॉर्डर-रेडियस समर्थन कोई बाद का विचार नहीं है - छद्म-तत्व के `बॉर्डर-रेडियस: इनहेरिट` का मतलब है कि आप बॉक्स में जो भी रेडियस डायल करते हैं वह स्वचालित रूप से रिंग पर ले जाया जाता है, इसलिए एक गोली के आकार का बटन या गोल कार्ड को घुमावदार कोनों से निकलने वाले सीधे किनारों के बजाय एक गोल चमकदार बॉर्डर मिलता है। इसका लाइव परीक्षण करें: त्रिज्या स्लाइडर को एक तेज आयत से एक पूर्ण गोली तक खींचें और प्रत्येक चरण पर रिंग को आकार का अनुसरण करते हुए देखें, जो कि वह विवरण है जो इस तकनीक के वास्तविक कार्यान्वयन को एक नकली स्क्रीनशॉट से अलग करता है।

पृष्ठ पर बाकी सब कुछ सीधे जेनरेट किए गए कोड पर मैप होता है: चौड़ाई स्लाइडर रिंग की मोटाई और छद्म-तत्व की इनसेट/पैडिंग है, अवधि स्लाइडर @keyframes एनीमेशन-अवधि है, दिशा स्विच केवल कीफ़्रेम के अंतिम कोण (+360deg या -360deg) के चिह्न को फ़्लिप करता है, और प्रत्येक रंग स्टॉप कॉनिक-ग्रेडिएंट() कॉल के अंदर अल्पविराम से अलग की गई प्रविष्टि है। पूरी चीज़ आपके ब्राउज़र में बिना छवियों, बिना जावास्क्रिप्ट-संचालित एनीमेशन लूप और बिना किसी बाहरी सेवाओं के चलती है - सीएसएस ब्लॉक की प्रतिलिपि बनाएँ और जहाँ भी आप इसे पेस्ट करते हैं, यह घूमता रहता है।