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

CSS border-bottom প্রপার্টি অ্যানিমেট করুন


CSS-এ border-bottom প্রপার্টিতে অ্যানিমেশন প্রয়োগ করতে নিচের কোডটি চালান:

উদাহরণ

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 500px;
        height: 400px;
        background: yellow;
        border: 5px dashed yellow;
        background-image: url('https://www.tutorialspoint.com/latest/microservice_architecture.png');
        animation: myanim 3s infinite;
        background-position: bottom left;
        background-size: 50px;
      }
      @keyframes myanim {
        20% {
          background-color: maroon;
          background-position: bottom right;
          background-size: 90px;
          border-bottom: 25px solid orange;
        }
      }
    </style>
  </head>
  <body>
    <h2>নিচের বর্ডারের জন্য অ্যানিমেশন</h2>
    <div></div>
  </body>
</html>

  1. CSS outline-offset প্রপার্টি অ্যানিমেট করুন

  2. CSS text-decoration-color প্রপার্টি অ্যানিমেট করুন

  3. CSS width প্রপার্টি অ্যানিমেট করুন

  4. CSS অ্যানিমেশন দিয়ে transform প্রপার্টি অ্যানিমেট করুন