Maison > Article > interface Web > Animation de la propriété column-count de CSS

Animation de la propriété column-count de CSS

WBOYavant: 2023-08-31 13:37:17709parcourir

Pour obtenir des effets d'animation à l'aide de la propriété column-counten CSS, vous pouvez essayer d'exécuter le code suivant

Exemple

Démonstration en temps réel

<!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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css count column

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Que se passe-t-il lors de la conversion de 1 en booléen en JavaScript ?Article suivant：Que se passe-t-il lors de la conversion de 1 en booléen en JavaScript ?

Articles Liés

Voir plus