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

CSS से ऑब्जेक्ट को साइन वेव डिस्टॉर्शन दें ताकि यह लहरदार दिखे

वेव इफेक्ट ऑब्जेक्ट को साइन वेव डिस्टॉर्शन देकर इसे लहरदार बनाने के लिए उपयोग किया जाता है।

इस फिल्टर में निम्न पैरामीटर्स उपयोग किए जा सकते हैं:

क्र.सं. पैरामीटर और विवरण
1 Add
मान 1 मूल इमेज को वेव्ड इमेज में जोड़ता है, 0 नहीं जोड़ता।
2 Freq
तरंगों की संख्या।
3 LightStrength
तरंग पर प्रकाश की ताकत (0 से 100 तक)।
4 Phase
साइन वेव किस डिग्री से शुरू होनी चाहिए (0 से 100 तक)।
5 Strength
तरंग प्रभाव की तीव्रता।

उदाहरण

वेव इफेक्ट सेट करने के लिए निम्न कोड चलाएं:

<html>
  <head>
  </head>
  <body>
    <img src="/css/images/logo.png" alt="CSS Logo" style="FILTER: Chroma(Color = #000000) Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)">
    <p>टेक्स्ट उदाहरण:</p>
    <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials</div>
  </body>
</html>

नोट: यह लीगेसी IE फिल्टर है। आधुनिक CSS में SVG फिल्टर्स (<feTurbulence>) या CSS Houdini का उपयोग करें।

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

    ट्रांजिशन इफेक्ट का स्पीड कर्व सेट करने के लिए transition-timing-function प्रॉपर्टी का उपयोग करें। आप जो वैल्यूज़ सेट कर सकते हैं: ease, ease-in, ease-out, linear, आदि। उदाहरण CSS के साथ ट्रांजिशन इफेक्ट का स्पीड कर्व सेट करने के लिए निम्न कोड चलाकर देखें: <!DOCTYPE html> <html>  

  1. - CSS transition-delay प्रॉपर्टी से ट्रांजिशन प्रभाव में देरी करें

    CSS में transition-delay प्रॉपर्टी का उपयोग करके ट्रांजिशन प्रभाव को निर्दिष्ट समय तक विलंबित किया जा सकता है। यह प्रॉपर्टी सेकंड (s) या मिलीसेकंड (ms) में मान स्वीकार करती है। उदाहरण नीचे दिए गए उदाहरण में, <div> पर होवर करने पर चौड़ाई बदलने का ट्रांजिशन 1 सेकंड की देरी से शुरू होता है। <

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

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