কম্পিউটার টিউটোরিয়াল

CSS দিয়ে পেজিনেশন হোবারে ট্রানজিশন ইফেক্ট তৈরি করুন


পেজিনেশন হোবারে ট্রানজিশন ইফেক্ট তৈরি করতে transition প্রপার্টি ব্যবহার করুন।

উদাহরণ

ট্রানজিশন ইফেক্ট যোগ করতে নিচের কোডটি চালাতে পারেন:

<!DOCTYPE html> <html>    <head>       <style>          .demo {             display: inline-block;          }          .demo a {             color: red;             padding: 5px 12px;             text-decoration: none;             border-radius: 5px;             transition: background-color 2s;          }          .demo a.active {             background-color: orange;             color: white;             border-radius: 5px;          }          .demo a:hover:not(.active) {             background-color: yellow;          }       </style>    </head>    <body>       <h2>Our Quizzes</h2>       <div class = "demo">          <a href = "prev.html"><</a>          <a href = "quiz1.html">Quiz1</a>          <a href = "quiz2.html">Quiz2</a>          <a href = "quiz3.html">Quiz3</a>          <a href = "quiz4.html" class="active">Quiz4</a>          <a href = "next.html">></a>       </div>    </body> </html>

  1. CSS দিয়ে ওভারলে ইফেক্ট তৈরি করার পদ্ধতি

  2. CSS দিয়ে স্মুথ স্ক্রলিং ইফেক্ট তৈরি

  3. CSS দিয়ে প্যারাল্যাক্স স্ক্রোলিং ইফেক্ট তৈরি

  4. CSS দিয়ে হোভারে ট্রানজিশন ইফেক্ট যোগ করা