सीएसएस का उपयोग करके पृष्ठभूमि रंग को बाएं से दाएं भरना

सीएसएस में, आप रैखिक ग्रेडिएंट का उपयोग करके और पृष्ठभूमि स्थिति को एनिमेट करके मनोरम होवर प्रभाव बना सकते हैं। यह दृष्टिकोण आपको होवर पर किसी तत्व की पृष्ठभूमि को बाएं से दाएं एक नए रंग से भरने में सक्षम बनाता है।

रैखिक ग्रेडिएंट और पृष्ठभूमि आकार

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

बैकग्राउंड पोजिशनिंग और एनिमेशन

सबसे पहले, सबसे बाएं रंग से शुरू करने के लिए पृष्ठभूमि को दाईं ओर रखें। होवर करने पर, सबसे दाहिना रंग प्रकट करने के लिए पृष्ठभूमि स्थिति को बाईं ओर बदलें। परिवर्तन को क्रमिक बनाने के लिए, परिवर्तन जोड़ें: सभी 2 आसान; संपत्ति।

कोड उदाहरण

div {
    background: linear-gradient(to left, red 50%, blue 50%) right;
    background-size: 200% 100%;
    transition:all 2s ease;
}
div:hover {
    background-position: left;
}

संक्रमण को अनुकूलित करना

संक्रमण के आरंभ और समाप्ति बिंदुओं को नियंत्रित करने के लिए, रैखिक ढाल में प्रतिशत समायोजित करें। उदाहरण के लिए, यहां एक कॉन्फ़िगरेशन है जो तत्व की चौड़ाई के 34% से 65% तक परिवर्तित होता है:

background: linear-gradient(to left, red 34%, blue 65%) right;
background-size: 300% 100%;

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