अवलोकन
इस लेख में, हम HTML और CSS का उपयोग करके एक आकर्षक सोशल लिंक प्रोफ़ाइल डिज़ाइन करने की प्रक्रिया के बारे में जानेंगे। हम एनिमेटेड होवर प्रभाव बनाने पर ध्यान केंद्रित करेंगे, जैसे रंग परिवर्तन और ग्रेडिएंट बटन एनिमेशन, और उपयोगकर्ता इंटरैक्शन को बढ़ाने के लिए फ़ॉन्टऑसम आइकन को शामिल करना। ग्रेडिएंट बैकग्राउंड एनीमेशन: होवर पर एनिमेटेड ग्रेडिएंट बैकग्राउंड प्रभाव। फ़ॉन्ट विस्मयकारी प्रतीक: विभिन्न सामाजिक प्लेटफार्मों के लिए आइकन शामिल हैं। उनमें से सबसे दिलचस्प है मँडराते समय बटनों का रंग बदलना। बटन एनीमेशन अन्तरक्रियाशीलता प्रदान करता है जो उपयोगकर्ता के लिए दिलचस्प है।

सोशल लिंक प्रोफ़ाइल इंटरफ़ेस डिज़ाइन करना
हमारी सोशल लिंक प्रोफ़ाइल में एक स्वच्छ और आधुनिक डिज़ाइन है, जो एक लचीले, उत्तरदायी कंटेनर के भीतर एक छवि और पाठ्य सामग्री को समाहित करता है। HTML संरचना सीधी है, जिसमें प्रोफ़ाइल लिंक पर बटन शामिल हैं।

HTML संरचना
यहां हमारे सामाजिक लिंक प्रोफ़ाइल प्रोजेक्ट के लिए मूल HTML संरचना है:

डायनामिक बटन एनिमेशन इस डिज़ाइन की एक प्रमुख विशेषता एनिमेटेड बटन है, जो जीवंत रंगों के अनुक्रम के माध्यम से परिवर्तित होती है। यह प्रभाव CSS एनिमेशन और वेरिएबल्स का उपयोग करके प्राप्त किया जाता है:

* {
संक्रमण: सभी 0.3 सहजता;
}
.सामाजिक-लिंक एक {
पाठ-सजावट: कोई नहीं;
रंग: #fff;
पैडिंग: 15px;
सीमा-त्रिज्या: 5px;
प्रदर्शन: फ्लेक्स;
संरेखित-आइटम: केंद्र;
औचित्य-सामग्री: केंद्र;
स्थिति: सापेक्ष;
पाठ-संरेखण: केंद्र;
संक्रमण: रंग 0.3s आसानी, परिवर्तन 0.3s आसानी;
गैप: 10px;
ओवर फलो हिडेन;
चौड़ाई: 100%;
अधिकतम-चौड़ाई: 300px;
}
.सामाजिक-लिंक a::पहले {
सामग्री: '';
स्थिति: पूर्ण;
शीर्ष: 0;
बाएँ: 0;
दाएँ: 0;
निचला: 0;
पृष्ठभूमि: रैखिक-ढाल (45 डिग्री, लाल, पीला, हरा, नीला, बैंगनी);
सीमा-त्रिज्या: 5px;
z-सूचकांक: -1;
अपारदर्शिता: 0;
संक्रमण: अपारदर्शिता 0.3s सहजता;
पृष्ठभूमि-आकार: 400%;
एनिमेशन: ग्रेडिएंटएनिमेशन 3s रैखिक अनंत;
}
@keyframes gradientAnimation {
0% {
पृष्ठभूमि-स्थिति: 0% 50%;
}
50% {
पृष्ठभूमि-स्थिति: 100% 50%;
}
100% {
पृष्ठभूमि-स्थिति: 0% 50%;
}
}

सीएसएस स्टाइलिंग
सोशल लिंक प्रोफ़ाइल को स्टाइल करने के लिए उपयोग किया जाने वाला CSS नीचे दिया गया है:
`/* प्रोफ़ाइल कंटेनर */
.प्रोफ़ाइल-कंटेनर {
पृष्ठभूमि: आरजीबी(16, 41, 167);
पैडिंग: 20px;
सीमा-त्रिज्या: 10px;
बॉक्स-छाया: 0 0 10px आरजीबीए(0, 0, 0, 0.1);
पाठ-संरेखण: केंद्र;
चौड़ाई: 100%;
अधिकतम-चौड़ाई: 400px;
}

/* सामाजिक लिंक शैलियाँ */
.सामाजिक-लिंक {
सूची-शैली: कोई नहीं;
पैडिंग: 0;
मार्जिन: 0;
प्रदर्शन: फ्लेक्स;
फ्लेक्स-दिशा: कॉलम;
औचित्य-सामग्री: केंद्र;
संरेखित-आइटम: केंद्र;
गैप: 20px;
}

.सामाजिक-लिंक्स ली {
मार्जिन: 10px 0;
}

.सामाजिक-लिंक एक {
पाठ-सजावट: कोई नहीं;
रंग: #fff;
पैडिंग: 15px;
सीमा-त्रिज्या: 5px;
प्रदर्शन: फ्लेक्स;
संरेखित-आइटम: केंद्र;
औचित्य-सामग्री: केंद्र;
स्थिति: सापेक्ष;
पाठ-संरेखण: केंद्र;
संक्रमण: रंग 0.3s आसानी, परिवर्तन 0.3s आसानी;
गैप: 10px;
ओवर फलो हिडेन;
चौड़ाई: 100%;
अधिकतम-चौड़ाई: 300px;
}

/* सामाजिक चिह्न शैलियाँ */
.सामाजिक-लिंक .सामाजिक-आइकन,
.सामाजिक-लिंक मैं {
चौड़ाई: 40px;
ऊँचाई: 40px;

फ़ॉन्ट-आकार: 24px;
पृष्ठभूमि-रंग: आरजीबीए(0, 0, 0, 0.5);
प्रदर्शन: फ्लेक्स;
औचित्य-सामग्री: केंद्र;
संरेखित-आइटम: केंद्र;
}

.सामाजिक-लिंक img.सामाजिक-आइकन {
चौड़ाई: 40px;
ऊँचाई: 40px;
ऑब्जेक्ट-फिट: शामिल;
}

.सामाजिक-लिंक .एफए-ब्रांड्स {
फ़ॉन्ट-आकार: 30px;
}

.सामाजिक-आइकन {
पृष्ठभूमि-रंग: आरजीबीए(0, 0, 0, 0.5);
}

।जोड़ना {
स्थिति: सापेक्ष;
प्रदर्शन: फ्लेक्स;
संरेखित-आइटम: केंद्र;
औचित्य-सामग्री: केंद्र;
चौड़ाई: 100%;
z-सूचकांक: 1;
}

.लिंक ए {
प्रदर्शन: फ्लेक्स;
औचित्य-सामग्री: केंद्र;
संरेखित-आइटम: केंद्र;
स्थिति: सापेक्ष;
चौड़ाई: 100%;
}`

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

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

निष्कर्ष
अपने वेब प्रोजेक्ट्स में डायनामिक बटन एनिमेशन को शामिल करने से उपयोगकर्ता जुड़ाव और संतुष्टि में काफी सुधार हो सकता है। सीएसएस एनिमेशन का लाभ उठाकर, आप दृश्य रूप से मनोरम तत्व बना सकते हैं जो न केवल शानदार दिखते हैं बल्कि समग्र उपयोगकर्ता अनुभव को भी बढ़ाते हैं। अपने डिज़ाइन में एक अनूठा स्पर्श जोड़ने और अपने दर्शकों को मंत्रमुग्ध करने के लिए विभिन्न एनिमेशन और शैलियों के साथ प्रयोग करें।

डायनामिक एनिमेशन के साथ सोशल लिंक प्रोफ़ाइल के लाइव डेमो के लिए, गीहब पर प्रोजेक्ट देखें।