কম্পিউটার

কিভাবে CSS দিয়ে ট্রানজিশন ইফেক্টের স্পিড কার্ভ সেট করবেন


ট্রানজিশন-টাইমিং-ফাংশন ব্যবহার করুন স্থানান্তর প্রভাবের গতি বক্ররেখা সেট করার সম্পত্তি। আপনি যে মানগুলি সেট করতে পারেন তা হল:সহজ, সহজ-ইন, সহজ-আউট, রৈখিক, ইত্যাদি।

উদাহরণ

আপনি CSS −

এর সাথে ট্রানজিশন ইফেক্টের গতি বক্ররেখা সেট করতে নিম্নলিখিত কোডটি চালানোর চেষ্টা করতে পারেন
<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 100px;
            height: 100px;
            background: red;
            transition: width 4s;
         }
         #effect1 {
            transition-timing-function: linear;
         }
         #effect2 {
            transition-timing-function: ease-in;
         }
         div:hover {
            width: 250px;
         }
      </style>
   </head>
   <body>
      <h1>Transition Effect</h1>
      <p>Hover over the div elements and see the transition effect and the speed:</p>
      <div id = "effect1">linear effect</div><br>
      <div id = "effect2">ease-in effect</div><br>
   </body>
</html>

  1. CSS দিয়ে অ্যানিমেশনের গতি বক্ররেখা উল্লেখ করুন

  2. CSS দিয়ে একটি বোতামের প্রস্থ সেট করুন

  3. CSS দিয়ে হোভার ইফেক্টের গতি সেট করুন

  4. কিভাবে CSS দিয়ে একটি ওভারলে প্রভাব তৈরি করবেন?