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

Tạo hiệu ứng chuyển động cho thuộc tính CSS order


Để thực hiện animation trên thuộc tính order với CSS, bạn có thể chạy đoạn mã sau:

Ví dụ

<!DOCTYPE html> <html>    <head>       <style>          #demo1 {             width: 600px;             height: 180px;             display: flex;          }          #inner {             animation: myanim 3s infinite;          }          #demo1 div {             width: 110px;             height: 180px;          }          @keyframes myanim {             30% {                order: 4;             }          }       </style>    </head>    <body>       <h1>CSS order property</h1>       <div id = "demo1">          <div style = "background-color:yellow;order:1;" id = "inner"></div>          <div style = "background-color:blue;order:2;"></div>          <div style = "background-color:orange;order:3;"></div>          <div style = "background-color:pink;order:4;"></div>          <div style = "background-color:gray;order:5;"></div>          <div style = "background-color:maroon;order:6;" id="inner"></div>       </div>    </body> </html>