🕯️ HTML, CSS से Candle Animation बनाना आसान हिंदी में सीखिए

🕯️ HTML, CSS से Candle Animation बनाना आसान हिंदी में सीखिए

अगर आप HTML और CSS से कुछ क्रिएटिव और रियलिस्टिक बनाना चाहते हैं, तो ये Candle Animation प्रोजेक्ट एक बेहतरीन शुरुआत है। इसमें आप flame flicker, glow effect और एक proper 3D illusion क्रिएट करना सीखेंगे — बिना किसी JavaScript के।

इस ब्लॉग में हम इस candle animation को step-by-step तोड़कर समझेंगे।

🧾 1. HTML Structure

HTML में सिर्फ एक div container है, जिसमें candle, wick, flame और glow को रखा गया है।

<body>
  <div class="candle-container">
    <div class="candle">
      <div class="wick"></div>
      <div class="flame"></div>
      <div class="glow"></div>
    </div>
  </div>
</body>

📌 इसका पूरा स्ट्रक्चर nested है, जिससे flame, wick और glow – candle के अंदर ही position हो सकें।

🎨 2. Candle Design (CSS से)

🎁 Base Candle:

.candle {
  width: 80px;
  height: 200px;
  background: linear-gradient(to bottom, #f5f5f5, #e0e0e0);
  border-radius: 10px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

🔹 Linear gradient से ऊपर से नीचे हलका से गहरा रंग दिया गया है ताकि 3D illusion बने। 🔹 border-radius इसे गोल बनाता है, जिससे candle का shape नॉर्मल cylinder जैसा लगे।

🔥 3. Wick (बत्ती)

.wick {
  width: 4px;
  height: 20px;
  background-color: #333;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
}

🧵 Wick को candle के ऊपर position किया गया है और यह दिखने में पतली सी डंडी जैसी लगती है।

✨ 4. Flame (जलती हुई लौ)

.flame {
  width: 30px;
  height: 50px;
  background: radial-gradient(
    ellipse at center,
    #ffeb3b 0%,
    #ff9800 50%,
    transparent 70%
  );
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50% 50% 20% 20%;
  animation: flicker 0.2s infinite alternate;
  filter: blur(5px);
}

🔥 Flame के लिए radial-gradient का इस्तेमाल किया गया है, जिसमें पीले से नारंगी रंग में fade होता है। 🎞️ animation: flicker से flame हलकी-फुलकी हिलती दिखती है। 🎨 filter: blur(5px) से flame का हलका चमकता illusion आता है।

🌟 5. Glow Effect

.glow {
  width: 100px;
  height: 100px;
  background: radial-gradient(
    circle,
    rgba(255, 235, 59, 0.3) 0%,
    transparent 70%
  );
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}

🌕 ये flame के आसपास एक glow बनाता है, जिससे candle जल रही है ऐसा real feel आता है।

🎞️ 6. Flicker Animation (लौ की हलचल)

@keyframes flicker {
  0% {
    transform: translateX(-50%) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translateX(-50%) scale(1.1);
    opacity: 1;
  }
}

📌 ये animation लौ को हलका सा बड़ा-छोटा करता है और उसकी opacity को बदलता है, जिससे flickering (टिमटिमाना) effect आता है।

🧱 7. Body Styling

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #1a1a1a;
  margin: 0;
}

🖼️ Body को flexbox से center किया गया है ताकि candle स्क्रीन के बीच में दिखे। 🌌 Dark background से flame और glow ज्यादा अच्छे से दिखते हैं।

✅ Project Summary Table

🔍 1. background: radial-gradient(circle, rgba(255, 235, 59, 0.3) 0%, transparent 70%)

✅ Radial Gradient क्या है?

• यह एक gradual color transition है जो center से बाहर की ओर फैलता है — गोल आकार में।
• यह background में होता है, और एक soft effect बनाता है।

🎨 Syntax Breakdown:

radial-gradient(
  circle,                         /* gradient का आकार: गोल */
  rgba(255, 235, 59, 0.3) 0%,     /* केंद्र पर रंग: हल्का पीला (30% opacity) */
  transparent 70%                 /* बाहर की ओर धीरे-धीरे पारदर्शी */
)

🔦 Effect: इससे candle flame के चारों तरफ एक हल्का, गोल, पीला glow बनता है।

📌 2. position: absolute;

इसका मतलब है:

• यह एलिमेंट अपने सबसे नज़दीकी positioned ancestor के हिसाब से सेट होगा।
• absolute होने की वजह से इसे हम top, left, etc. से exact जगह पर रख सकते हैं।

📍इस case में यह .candle के अंदर है, जो relative या absolute है, इसलिए glow उसी के हिसाब से position होगी।

🧭 3. top: -80px;

• इसका मतलब: अपनी container (.candle) की ऊपर की direction में 80px move करना।
• इसलिए glow candle के ऊपर दिखाई देता है — flame के आसपास।

💡 Negative value होने से ये ऊपर चला जाता है।

📍 4. left: 50%;

• इसका मतलब: अपने parent की width का 50% – यानी बिलकुल सेंटर में horizontal position।
• लेकिन इससे वो exact center पर नहीं आता क्योंकि उसका खुद का width भी है — इसलिए हम इसे adjust करने के लिए transform का इस्तेमाल करते हैं।

🔄 5. transform: translateX(-50%);

• यह अपने खुद के width का 50% left की तरफ खिसका देता है।
• इसका काम: एलिमेंट को bilkul horizontal center में लाना।

👨‍🏫 क्यों ज़रूरी है?

• मान लीजिए आपकी width 100px है, और आपने left: 50% किया है — तो वो 50% तो सही चला जाएगा, लेकिन 100px की width का left हिस्सा container से बाहर चला जाएगा।
• translateX(-50%) से ये balance हो जाता है।

🔵 6. border-radius: 50%;

• इससे एलिमेंट एक perfect circle बन जाता है।
• बिना radius ये square या rectangle होता।

✍️ लेखक: सिद्धार्थ जैन 📅 प्रकाशन तिथि: 3 अगस्त 2025