CSS box-shadow প্রোপার্টিতে অ্যানিমেশন করুন

CSS @keyframes ব্যবহার করে box-shadow প্রোপার্টিতে অ্যানিমেশন করা যায়, যা গভীরতা এবং উত্থান 느낌 দেয়।

উদাহরণ

নিচের কোডটি চালিয়ে box-shadow প্রোপার্টিতে অ্যানিমেশন করার উদাহরণ দেখুন:

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      div { 
        width: 200px; 
        height: 300px; 
        background: yellow; 
        border: 10px solid red; 
        animation: myanim 3s infinite; 
        bottom: 30px; 
        position: absolute; 
      } 
      @keyframes myanim { 
        20% { 
          bottom: 100px; 
          box-shadow: 30px 45px 70px orange; 
        } 
      } 
    </style> 
  </head> 
  <body> 
    <h2>Performing Animation on box-shadow</h2> 
    <div></div> 
  </body> 
</html>

ব্যাখ্যা: @keyframes myanim এ ২০% এ bottom: 100px (উপর চলে) এবং box-shadow: 30px 45px 70px orange (বড় নারঙ্গি ছায়া) সেট করা হয়েছে। অ্যানিমেশন ৩ সেকেন্ডে সম্পন্ন হয় এবং infinite লুপ চলে। বাকি সময়ে ডিফল্ট স্টেটে থাকে (ছায়া নেই, bottom: 30px)।