動畫CSS的column-count屬性

WBOY轉載: 2023-08-31 13:37:17725瀏覽

要在CSS中使用 column-count屬性實現動畫效果，你可以嘗試執行以下程式碼

範例

即時示範

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 400px;
            height: 300px;
            background: white;
            border: 10px solid red;
            animation: myanim 3s infinite;
            bottom: 30px;
            position: absolute;
         }
         @keyframes myanim {
            20% {
               bottom: 100px;
               box-shadow: 30px 45px 70px orange;
               column-count: 4;
            }
         }
      </style>
   </head>
   <body>
      <h2>Performing Animation on column-count property</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>

以上是動畫CSS的column-count屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css count column

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：當在JavaScript中將1轉換為布林值時會發生什麼？下一篇：當在JavaScript中將1轉換為布林值時會發生什麼？

看更多