Comment créer un graphique à barres animé en utilisant HTML et CSS ?

Vue d'ensemble

Animation Bar est une barre d'animation graphique créée en utilisant HTML et CSS. La disposition de la barre animée est créée en HTML et le style de la barre est réalisé en CSS. Un graphique à barres normal peut être créé normalement, mais nous devons créer un graphique à barres animé, nous utiliserons donc la propriété d'animation de transition CSS pour l'animer. Nous allons construire une barre d'animation identique au synchroniseur de barre d'animation musicale.

Algorithme

Étape 1 - Créez un fichier HTML dans un éditeur de texte et ajoutez-y un passe-partout HTML.

Étape 2 − Créez maintenant un conteneur div parent qui contient les lignes animées.

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

Étape 3 −Créez un sous-conteneur div à l'intérieur du div parent. Créez au moins sept "divs" pour créer une bonne barre animée et ajoutez-y les noms de classe sous forme de lignes.

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

Étape 4 − Créez maintenant un fichier style.css et liez le fichier au document HTML.

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

Étape 5− Définissez le style de l'élément HTML dans le fichier style.css.

.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);
}

Étape 6 − Animez ces lignes en positionnant le nom de classe du conteneur enfant "div".

.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);
   }

}

Étape 7−La barre d'animation a été créée avec succès.

Exemple

Dans cet exemple, nous créons une barre animée. Pour ce faire, nous créons deux fichiers : index.html et style.css. Le fichier d'index contient la mise en page de la page et le fichier style.css contient la partie style de la page.

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


   
tutorialspoint.com
   

      

      

      

      

      

      

      

      

   

L'image ci-dessous montre le résultat de l'exemple ci-dessus et montre quelques lignes animées que vous pouvez voir en direct sur votre navigateur. Lorsqu'un utilisateur charge cette fonctionnalité dans son navigateur, il affiche une ligne animée plus attrayante.

Conclusion

Cette fonctionnalité de la barre d'animation peut être utilisée dans le synthétiseur vocal comme interface graphique. Vous pouvez également voir ce composant dans de nombreuses applications telles que les enregistreurs audio et les synchroniseurs de rythmes DJ. La partie principale de l'exemple ci-dessus est le timing, nous définissons le timing pour qu'il s'anime à mesure que la taille de la barre augmente.

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!