কম্পিউটার

অ্যানিমেট CSS ফ্লেক্স-বেসিস সম্পত্তি


ফ্লেক্স-ভিত্তিতে অ্যানিমেশন বাস্তবায়ন করতে CSS এর সাথে সম্পত্তি, আপনি নিম্নলিখিত কোড চালানোর চেষ্টা করতে পারেন

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
   .box {
      display: flex;
      background-color: green;
   }
   .box > div {
      background-color: white;
      text-align: center;
      line-height: 40px;
      font-size: 25px;
      width: 100px;
      margin: 5px;
   }
   div {
      animation: myanim 4s infinite;
   }
   @-webkit-keyframes myanim {
      50% {
         flex-basis: 100px;
      }
   }
</style>
</head>
<body>
   <h1>Quiz</h1>
   <div class = "box">
      <div>Q1</div>
      <div>Q2</div>
      <div>Q3</div>
      <div style = "flex-basis: 350px">Q4</div>
      <div>Q5</div>
      <div>Q6</div>
      <div>Q7</div>
      <div>Q8</div>
      <div>Q9</div>
   </div>
</body>
</html>

  1. CSS ফ্লেক্স-ভিত্তিক সম্পত্তি

  2. CSS ফ্লেক্স-সঙ্কুচিত সম্পত্তি অ্যানিমেট করুন

  3. CSS-এ চাইল্ড সিলেক্টর

  4. CSS-এ ব্যাকগ্রাউন্ড অ্যাটাচমেন্ট