Wie erstelle ich ein animiertes Balkendiagramm mit HTML und CSS?

Übersicht

Animation Bar ist eine grafische Animationsleiste, die mit HTML und CSS erstellt wurde. Das Layout der animierten Leiste wird mit HTML erstellt und das Styling der Leiste erfolgt mit CSS. Ein normales Balkendiagramm kann normal erstellt werden, aber wir müssen ein animiertes Balkendiagramm erstellen, daher verwenden wir die CSS-Übergangsanimationseigenschaft, um es zu animieren. Wir werden eine Animationsleiste erstellen, die mit dem Musikanimationsleisten-Synchronizer identisch ist.

Algorithmus

Schritt 1 – Erstellen Sie eine HTML-Datei in einem Texteditor und fügen Sie darin ein HTML-Boilerplate hinzu.

Schritt 2 − Erstellen Sie nun einen übergeordneten Div-Container, der die animierten Linien enthält.

<div class="animatedLines"></div>

Schritt 3 −Erstellen Sie einen Div-Untercontainer innerhalb des übergeordneten Div. Erstellen Sie mindestens sieben „Divs“, um eine gute animierte Leiste zu erstellen, und fügen Sie die Klassennamen als Linien hinzu.

<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>

Schritt 4 − Erstellen Sie nun eine style.css-Datei und verknüpfen Sie die Datei mit dem HTML-Dokument.

<link rel="stylesheet" href="style.css">

Schritt 5− Legen Sie den Stil des HTML-Elements in der Datei style.css fest.

.animatedLines {
   display: flex;
   justify-content: center;
   padding-top: 2rem;
}
.animatedLines .lines:nth-child(1) {
   animation-delay: .1s;
   background-color: rgb(141, 255, 88);
}

.animatedLines .lines:nth-child(2) {
   animation-delay: .2s;
   background-color: rgb(127, 253, 69);
}

.animatedLines .lines:nth-child(3) {
   animation-delay: .3s;

   background-color: rgb(18, 49, 6);
}

.animatedLines .lines:nth-child(4) {
   animation-delay: .4s;
   background-color: rgb(18, 49, 6);
}

.animatedLines .lines:nth-child(5) {
   animation-delay: .3s;
   background-color: rgb(18, 49, 6);
}

.animatedLines .lines:nth-child(6) {
   animation-delay: .2s;
   background-color: rgb(127, 253, 69);
}

.animatedLines .lines:nth-child(7) {
   animation-delay: .1s;
   background-color: rgb(102, 228, 43);
}

Schritt 6 − Animieren Sie diese Zeilen, indem Sie den Klassennamen des untergeordneten „div“-Containers positionieren.

.animatedLines .lines {
   list-style: none;
   width: 5px;
   height: 10px;
   margin: 0 4px;
   animation: animatedBars .5s infinite alternate;
}

@keyframes animatedBars {
   0% {
      transform: scaleY(1);
   }

   25% {
       transform: scaleY(1);
   }

   50% {
       transform: scaleY(1);
   }

   100% {
       transform: scaleY(6);
   }

}

Schritt 7− Die Animationsleiste wurde erfolgreich erstellt.

Beispiel

In diesem Beispiel erstellen wir eine animierte Leiste. Dazu erstellen wir zwei Dateien: index.html und style.css. Die Indexdatei enthält das Layout der Seite und die Datei style.css enthält den Stilteil der Seite.

   
   <link rel="stylesheet" href="style.css">
   


   
tutorialspoint.com
   

      

      

      

      

      

      

      

      

   

Das untenstehende Bild zeigt die Ausgabe des obigen Beispiels und zeigt einige animierte Linien, die Sie live in Ihrem Browser sehen können. Wenn ein Benutzer diese Funktion in seinen Browser lädt, wird eine animierte Linie angezeigt, die attraktiver aussieht.

Fazit

Diese Funktion der Animationsleiste kann im Sprachsynthesizer als grafische Oberfläche verwendet werden. Sie können diese Komponente auch in vielen Anwendungen wie Audiorecordern und DJ-Beat-Synchronisierern sehen. Der Hauptteil des obigen Beispiels ist das Timing. Wir stellen das Timing so ein, dass die Animation mit zunehmender Balkengröße erfolgt.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein animiertes Balkendiagramm mit HTML und CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!