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

百变鹏仔 3个月前 (09-22) #HTML

文章标签如何使用

概述

动画栏是使用 HTML 和 CSS 创建的图形动画栏。动画栏的布局是使用 HTML 创建的，栏的样式是使用 CSS 制作的。普通的条形图可以正常创建，但我们必须创建带有动画的条形图，因此我们将使用 CSS 过渡动画属性来使其具有动画效果。我们将构建一个与音乐动画条同步器相同的动画条。

算法

第 1 步 - 在文本编辑器中创建一个 HTML 文件并在其中添加 HTML 样板。

第 2 步 − 现在创建一个包含动画线条的父 div 容器。

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

第 3 步 − 在父 div 内创建一个 div 子容器。创建至少七个“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 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。索引文件包含页面的布局，style.css 文件包含页面的样式部分。

   animated bars   <link rel="stylesheet" href="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);      }      .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);         }            }      tutorialspoint.com

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

结论

动画栏的这一功能可以作为图形界面在语音合成器中使用。您还可以在许多应用程序中看到此组件，例如录音机和 dj 节拍同步器。上面例子中的主要部分是计时，我们设置了随着条形尺寸的增加而动画的计时。

文章推荐

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

概述

算法

示例

tutorialspoint.com

结论

html代码是什么

值得一学的6个前端HTML+CSS特效

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8