如何使用HTML和CSS创建动态条形图

概述

动态条形图是使用HTML和CSS创建的具有图形动画效果的条形图。动态条形图的布局是使用HTML创建的，条形图的样式是使用CSS进行设置的。普通的条形图可以正常创建，但是为了创建动画效果，我们将使用CSS过渡动画属性进行设置。我们将构建一个与音乐动效条形图同步的动画条形图。

步骤

步骤1 - 在文本编辑器中创建一个HTML文件并添加HTML骨架。

步骤2 - 现在创建一个包含动态线条的父级div容器。

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

步骤3 - 在父级div内创建一个div子容器。创建至少七个’div’以制作一个良好的动画条，并将其命名为lines。

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

步骤4 − 现在创建一个style.css文件，并将该文件链接到HTML文档。

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

步骤5 - 在style.css文件中为HTML元素设置样式。

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

步骤6 − 将这些线条的动画作为目标定位子元素‘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);
   }

}

步骤7 −动画条创建成功。

示例

在这个示例中，我们创建了一个动画条。为了实现这个目的，我们创建了两个文件：index.html和style.css。index文件包含页面的布局，style.css文件包含页面的样式部分。

<html>
<head>
   <title>animated bars</title>
   <link rel="stylesheet" href="style.css">
   <style>
      .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);
      }
      .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);
         }

      }
   </style>
</head>
<body>
   <h1 style="text-align: center;text-decoration: underline;color: green;">tutorialspoint.com</h1>
   <div class="animatedLines">
      <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>
   </div>
</body>
</html>

给定的下面的图像显示了上述示例的输出，它显示了一些动态的线条，你可以在浏览器上实时看到它们。当用户将此功能加载到浏览器中时，它会显示出一些更具吸引力的动画线条。