Heim > Artikel > Web-Frontend > Animieren der Column-Count-Eigenschaft von CSS

Animieren der Column-Count-Eigenschaft von CSS

WBOYnach vorne: 2023-08-31 13:37:17712Durchsuche

Um Animationseffekte mit der Eigenschaft column-countin CSS zu erzielen, können Sie versuchen, den folgenden Code auszuführen

Beispiel

Echtzeitdemonstration

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

Das obige ist der detaillierte Inhalt vonAnimieren der Column-Count-Eigenschaft von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css count column

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Was passiert, wenn in JavaScript 1 in einen booleschen Wert konvertiert wird?Nächster Artikel：Was passiert, wenn in JavaScript 1 in einen booleschen Wert konvertiert wird?

In Verbindung stehende Artikel

Mehr sehen