Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> CSS

Tạo hoạt ảnh cho thuộc tính CSS column-gap


Để triển khai hoạt ảnh trên thuộc tính column-gap với CSS, bạn có thể chạy mã sau −

Ví dụ

<!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>Thực hiện hoạt ảnh trên thuộc tính column gap</h2>       <div>This is demo text! This is demo text! This is demo text!          This is demo text! This is demo text! This is demo text!          This is demo text! This is demo text! This is demo text!          This is demo text! This is demo text! This is demo text!          This is demo text! This is demo text! This is demo text!          This is demo text! This is demo text! This is demo text!          This is demo text! This is demo text! This is demo text!          This is demo text! This is demo text! This is demo text!          This is demo text!       </div>    </body> </html>