create a animated text with html and css

-
Document


Create a Animated Glowing text with HTML and CSS



यहां पर हमने एचटीएमएल और सीएसएस का उपयोग करके एक एनिमेटेड टेक्स्ट बनाया है। इसमें उपयोगकर्ता "text" शब्द को एडिट कर सकता है, और यह शब्द विशेष प्रभाव के साथ चमकता है।



text



HTML Code:-







Code download karne ke liye Download button per click karen



  1. <!DOCTYPE html>: यह दस्तावेज़ के प्रकार को बताता है कि यह HTML5 है।

  2. <html lang="en">: यह HTML दस्तावेज़ की शुरुआत है और यह बताता है कि भाषा अंग्रेजी (en) है।

  3. <head>: यह वेब पेज के मेटाडेटा (metadata) को रखने के लिए है।

    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: यह वेब पेज को मोबाइल डिवाइस पर ठीक से दिखाने के लिए है।

    • <title>Document</title>: यह वेब पेज का टाइटल है, जो ब्राउज़र के टैब पर दिखाई देता है।


  4. <body>: यह वेब पेज का मुख्य कंटेंट है।

  5. <h2> यह contenteditable="true" के साथ एक हेडिंग टैग (h2) है, जिसका मतलब है कि उपयोगकर्ता पेज पर सीधे इस टेक्स्ट को बदल सकते हैं। इसका प्रारंभिक टेक्स्ट "text" है।



CSS Code:-








Code download karne ke liye Download button per click karen




  1. body: यह बॉडी एलिमेंट के लिए स्टाइल है।

    • display: flex;: यह बॉडी को एक फ्लेक्स कंटेनर बनाता है।

    • justify-content: center;: यह बॉडी के कंटेंट को क्षैतिज (horizontal) रूप से केंद्रित करता है।

    • align-items: center;: यह बॉडी के कंटेंट को लंबवत (vertical) रूप से केंद्रित करता है।

    • height: 100vh;: यह बॉडी की ऊंचाई को पूरी स्क्रीन की ऊंचाई (viewport height) के बराबर करता है।

    • background: #333;: यह बॉडी का बैकग्राउंड कलर black (#000) सेट करता है।

  2. .Antext क्लास:

    • इस क्लास का उपयोग हेडिंग टेक्स्ट पर विभिन्न स्टाइल लागू करने के लिए किया गया है, जैसे कि बड़ी फॉन्ट साइज (6em), अपरकेस (सभी बड़े अक्षर), और टेक्स्ट के बीच में स्पेसिंग (letter-spacing)।
    • -webkit-box-reflect प्रभाव का उपयोग किया गया है, जिससे टेक्स्ट का एक हल्का रिफ्लेक्शन दिखेगा।
    • animation के द्वारा टेक्स्ट पर एक एनिमेशन लागू किया गया है, जो 5 सेकंड के अंतराल पर चलती रहती है।

  3. @keyframes anime एनिमेशन:
    • इस एनिमेशन में टेक्स्ट का रंग और छाया समय के साथ बदलते हैं। जब एनिमेशन चलती है, तो टेक्स्ट एक चमकदार नीले रंग में बदलता है और चमकने (glow) का प्रभाव दिखाई देता है।
    • color और text-shadow की विशेषताएँ एनिमेशन के दौरान बदलती रहती हैं, जिससे टेक्स्ट अलग-अलग रंगों में चमकता है।



Comments

Post a Comment

Popular posts from this blog

Multiples way to earn money online at home without Investment

-
Multiples Way To Earn Mony At Home Without Investment 💸Earn Mony Online💸 💰Click Earn Mony At Home Without Investment Earn Mony 💸Earn Mony Online💸 💰Click Earn Mony At Home Without Investment Earn Mony 💸Earn Mony Online💸 💰Click Earn Mony At Home Without Investment Earn Mony 💸Earn Mony Online💸 💰Click Earn Mony At Home Without Investment Earn Mony 💸Earn Mony Online💸 💰Click Earn Mony At Home Without Investment Earn Mony 💸Earn Mony Online💸 💰Click Earn Mony At Home Without Investment Earn Mony 💸Earn Mony Online💸 💰Click Earn Mony At Home Without ...
Read more

create apple logo with html and css

-
Document Create a Apple Icon with HTML and CSS यहां पर हमने एचटीएमएल और सीएसएस का उपयोग करके एक एनीमेटेड Apple आइकन बनाया है। HTML Code:- Document Download HTML Code download karne ke liye Download button per click karen <!DOCTYPE html>: यह दस्तावेज़ के प्रकार को बताता है कि यह HTML5 है। <html lang="en">: यह HTML दस्तावेज़ की शुरुआत है और यह बताता है कि भाषा अंग्रेजी (en) है। <head>: यह वेब पेज के मेटाडेटा (metadata) को रखने के लिए है। <meta name="viewport" content="width=device-width, initial-scale=1.0">: यह वेब पेज को मोबाइल डिवाइस पर ठीक से दिखाने के लिए है। ...
Read more