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

CSS column-gap প্রোপার্টি অ্যানিমেট করা

CSS-এ column-gap প্রোপার্টিতে অ্যানিমেশন প্রয়োগ করতে নিচের কোডটি চেষ্টা করুন।

উদাহরণ

<!DOCTYPE html> <html>    <head>       <style>          div {             width: 600px;             height: 300px;             background: white;             border: 10px solid red;             animation: myanim 3s infinite;             bottom: 30px;             position: absolute;             column-count: 4;          }          @keyframes myanim {             20% {                bottom: 100px;                box-shadow: 30px 45px 70px orange;                column-gap: 70px;             }          }       </style>    </head>    <body>       <h2>কলাম গ্যাপ প্রোপার্টিতে অ্যানিমেশন</h2>       <div>এটি ডেমো টেক্সট!          এটি ডেমো টেক্সট!          এটি ডেমো টেক্সট!          এটি ডেমো টেক্সট!          এটি ডেমো টেক্সট!          এটি ডেমো টেক্সট!          এটি ডেমো টেক্সট!          এটি ডেমো টেক্সট!          এটি ডেমো টেক্সট!          এটি ডেমো টেক্সট!          এটি ডেমো টেক্সট!          এটি ডেমো টেক্সট!          এটি ডেমো টেক্সট!       </div>    </body> </html>
  1. CSS word-spacing প্রপার্টি অ্যানিমেট করুন

  2. CSS অ্যানিমেশন দিয়ে vertical-align প্রপার্টি অ্যানিমেট করুন

  3. CSS text-justify প্রপার্টি ব্যবহার

  4. CSS right প্রপার্টি ব্যবহার