इस ब्लॉग पोस्ट में, हम टेलविंड सीएसएस का उपयोग करके एक मनोरम "शूटिंग स्टार" बॉर्डर एनीमेशन बनाएंगे। यह प्रभाव इनपुट फ़ील्ड को एक चमकदार, एनिमेटेड बॉर्डर देता है जो उपयोगकर्ता का ध्यान आकर्षित कर सकता है - ईमेल साइन-अप या महत्वपूर्ण सूचनाओं जैसे कॉल-टू-एक्शन अनुभागों के लिए बिल्कुल सही।

डेमो

कोड में गोता लगाने से पहले, आप यहां प्रभाव का लाइव डेमो देख सकते हैं: टेलविंड प्लेग्राउंड में देखें।

संकल्पना

टेलविंड सीएसएस की उपयोगिता कक्षाओं और छद्म तत्वों का उपयोग करके एनीमेशन हासिल किया जाता है। हम एक शंकुधारी ढाल एनीमेशन बनाने के लिए टेलविंड के छद्म वर्ग का उपयोग करेंगे जो इनपुट क्षेत्र के चारों ओर घूमता है, जिससे सीमा का पता लगाने वाले शूटिंग स्टार का भ्रम होता है।

HTML और टेलविंड CSS सेटअप

इस प्रभाव को बनाने के लिए आवश्यक HTML संरचना और टेलविंड सीएसएस कक्षाएं नीचे दी गई हैं:

कोड को तोड़ना

कंटेनर सेटअप

  





हम एक फ्लेक्स कंटेनर बनाकर शुरुआत करते हैं जो सामग्री को एच-स्क्रीन (पूरी ऊंचाई) और बीजी-ब्लैक (काली पृष्ठभूमि) के साथ लंबवत और क्षैतिज रूप से केंद्रित करता है।

  
  
  इनपुट फ़ील्ड के लिए रैपर




  





इनपुट फ़ील्ड को एक div के अंदर लपेटा गया है जिसमें z-10 है ताकि यह सुनिश्चित किया जा सके कि यह एनिमेटेड बॉर्डर के ऊपर है, इसे फ्लेक्स कंटेनर के भीतर केंद्रित करने के लिए m-ऑटो है, और एनिमेटेड बॉर्डर को इसकी सीमाओं के भीतर रखने के लिए ओवरफ़्लो-छिपा हुआ है।

  
  
  एनिमेटेड सीमा के साथ इनपुट फ़ील्ड




  





मुख्य इनपुट फ़ील्ड 500px की निश्चित चौड़ाई और 14 टेलविंड इकाइयों की ऊंचाई पर सेट है।
बॉर्डर-सफ़ेद/50 वर्ग एक अर्ध-पारदर्शी बॉर्डर जोड़ता है, जबकि राउंडेड-एमडी इसे गोलाकार कोने देता है।

बीजी-ब्लैक पृष्ठभूमि रंग को कंटेनर के साथ मिलाकर काला सेट करता है।

  
  
  एनीमेशन बनाना




  after:absolute after:-inset-[1px] after:-z-10 after:h-full after:w-full after:animate-[spin_4s_infinite] after:bg-[conic-gradient(var(--tw-gradient-stops))] after:from-transparent after:from-40% after:via-50% after:to-blue-600 after:to-100%">




बाद वाले छद्म तत्व का उपयोग शंक्वाकार ढाल बनाने के लिए किया जाता है जो सीमा के चारों ओर चेतन होगा।

After:-inset-[1px] इनपुट की सीमा से परे ग्रेडिएंट को थोड़ा विस्तारित करता है, और After:absolute इसे संपूर्ण इनपुट क्षेत्र को कवर करने के लिए बिल्कुल सही स्थिति में रखता है।

After:animate-[spin_4s_infinite] एक कस्टम स्पिन एनीमेशन जोड़ता है जो हर 4 सेकंड में एक पूर्ण रोटेशन पूरा करता है।
after:bg-[conic-gradient...] ग्रेडिएंट प्रभाव पैदा करता है। हम रंग स्टॉप को परिभाषित करने के लिए पारदर्शी और नीले-600 वर्गों का उपयोग करते हैं, जो एक लुप्त होती प्रभाव देता है जो एक शूटिंग स्टार की नकल करता है।

  
  
  इनपुट फ़ील्ड स्टाइलिंग




  



इनपुट स्वयं पारदर्शी (बीजी-पारदर्शी) है और अपने पैरेंट की पूरी ऊंचाई और चौड़ाई लेता है।
टेक्स्ट-एलजी वर्ग टेक्स्ट को आकार देता है, जबकि टेक्स्ट-व्हाइट और प्लेसहोल्डर:टेक्स्ट-व्हाइट/40 यह सुनिश्चित करता है कि टेक्स्ट और प्लेसहोल्डर गहरे रंग की पृष्ठभूमि पर दिखाई दे रहे हैं।
अंत में, focus:outline-none कस्टम स्टाइल को बनाए रखने के लिए डिफ़ॉल्ट फोकस रूपरेखा को हटा देता है।

  
  
  निष्कर्ष


टेलविंड सीएसएस की कुछ पंक्तियों और छद्म तत्वों की शक्ति के साथ, आप इस शूटिंग स्टार बॉर्डर एनीमेशन जैसे आकर्षक प्रभाव बना सकते हैं। यह प्रभाव न केवल सौंदर्य की दृष्टि से मनभावन है, बल्कि आपकी अपनी परियोजनाओं के लिए इसे लागू करना और अनुकूलित करना भी आसान है। अपनी डिज़ाइन आवश्यकताओं के अनुरूप रंग, समय और अन्य गुणों में बेझिझक बदलाव करें!

हैप्पी कोडिंग!

अनस्प्लैश पर जस्कटीज़ वु द्वारा कवर फ़ोटो