CSSのcolumn-countプロパティをアニメーション化する-htmlチュートリアル-php.cn

CSSのcolumn-countプロパティをアニメーション化する

WBOY

リリース： 2023-08-31 13:37:17

転載

690 人が閲覧しました

CSSのcolumn-countプロパティをアニメーション化する

CSS の column-count プロパティを使用してアニメーション効果を実現するには、次のコードを実行してみてください。

Example

#リアルタイムデモンストレーション

<!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 中国語 Web サイトの他の関連記事を参照してください。