CSS의 열 개수 속성 애니메이션-HTML 튜토리얼-php.cn

CSS의 열 개수 속성 애니메이션

WBOY

풀어 주다： 2023-08-31 13:37:17

앞으로

690명이 탐색했습니다.

CSS의 열 개수 속성 애니메이션

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의 열 개수 속성 애니메이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!