CSS text-shadow प्रॉपर्टी को एनिमेट करें

CSS में text-shadow प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह टेक्स्ट की छाया को समय के साथ बदलता है।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      div { 
        height: 200px; 
        background-color: orange; 
        border: 2px solid blue; 
        animation: myanim 3s infinite; 
      } 
      @keyframes myanim { 
        30% { 
          text-shadow: 10px 20px 30px blue; 
        } 
      } 
    </style> 
  </head> 
  <body> 
    <h1>CSS text-shadow प्रॉपर्टी</h1> 
    <div> 
      यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। 
    </div> 
  </body> 
</html>

व्याख्या: प्रारंभिक कोई छाया नहीं। एनिमेशन के 30% पर text-shadow: 10px 20px 30px blue लागू होता है: क्षैतिज ऑफसेट 10px, ऊर्ध्वाधर 20px, ब्लर त्रिज्या 30px, रंग नीला। एकाधिक छायाएं कॉमा से अलग करके जोड़ी जा सकती हैं।