Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS से ट्रांजिशन इफेक्ट का स्पीड कर्व कैसे सेट करें


ट्रांजिशन इफेक्ट का स्पीड कर्व सेट करने के लिए transition-timing-function प्रॉपर्टी का उपयोग करें। आप जो वैल्यूज़ सेट कर सकते हैं: ease, ease-in, ease-out, linear, आदि।

उदाहरण

CSS के साथ ट्रांजिशन इफेक्ट का स्पीड कर्व सेट करने के लिए निम्न कोड चलाकर देखें:

<!DOCTYPE html> <html>    <head>       <style>          div {             width: 100px;             height: 100px;             background: red;             transition: width 4s;          }          #effect1 {             transition-timing-function: linear;          }          #effect2 {             transition-timing-function: ease-in;          }          div:hover {             width: 250px;          }       </style>    </head>    <body>       <h1>Transition Effect</h1>       <p>Hover over the div elements and see the transition effect and the speed:</p>       <div id = "effect1">linear effect</div><br>       <div id = "effect2">ease-in effect</div><br>    </body> </html>

  1. - CSS width प्रॉपर्टी से बटन की चौड़ाई सेट करें

    CSS width प्रॉपर्टी का उपयोग करके बटन (या किसी भी तत्व) की निश्चित चौड़ाई सेट की जा सकती है। यह बटन के आकार को कंटेंट से स्वतंत्र बनाता है और लेआउट में स्थिरता प्रदान करता है। उदाहरण नीचे दिए गए उदाहरण में, बटन पर width: 120px के साथ अन्य स्टाइल्स (गोल कोने, डैश्ड बॉर्डर) लागू किए गए हैं। <!DOC

  1. - CSS transition-duration से होवर प्रभाव की गति सेट करें

    CSS transition-duration प्रॉपर्टी ट्रांजिशन प्रभाव के पूरा होने में लगने वाला समय निर्दिष्ट करती है। :hover स्यूडो-क्लास के साथ संयोजन करके होवर प्रभाव की गति को नियंत्रित किया जा सकता है। उदाहरण नीचे दिए गए उदाहरण में, बटन पर transition-duration: 2s सेट करके होवर प्रभाव (बैकग्राउंड रंग और बॉर्डर ब

  1. CSS से ओवरले इफेक्ट (मोडल/पॉपअप) कैसे बनाएं? CSS से ओवरले इफेक्ट (मोडल/पॉपअप) कैसे बनाएं?

    ओवरले पूरे व्यूपोर्ट को कवर करता है (position: fixed; top: 0; left: 0; width/height: 100%)। डिफ़ॉल्ट display: none, बटन क्लिक पर JS से display: block। rgba बैकग्राउंड से पेज डिम होता है। सर्च बार और क्लोज बटन शामिल। उदाहरण <!DOCTYPE html> <html> <head> <link rel=stylesheet h