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

    概述

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

    算法

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

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

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

     第 3 步 − 在父 div 内创建一个 div 子容器。创建至少七个“div”来制作一个好的动画栏，并将类名作为线条添加到其中。

    1. <div class="lines"></div>
    2. <div class="lines"></div>
    3. <div class="lines"></div>
    4. <div class="lines"></div>
    5. <div class="lines"></div>
    6. <div class="lines"></div>
    7. <div class="lines"></div>
    8. <div class="lines"></div>

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

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

     第 5 步− 在 style.css 文件中设置 HTML 元素的样式。

    1. .animatedLines {
    2.    display: flex;
    3.    justify-content: center;
    4.    padding-top: 2rem;
    5. }
    6. .animatedLines .lines:nth-child(1) {
    7.    animation-delay: .1s;
    8.    background-color: rgb(141, 255, 88);
    9. }
    10.  
    11. .animatedLines .lines:nth-child(2) {
    12.    animation-delay: .2s;
    13.    background-color: rgb(127, 253, 69);
    14. }
    15.  
    16. .animatedLines .lines:nth-child(3) {
    17.    animation-delay: .3s;
    18.  
    19.    background-color: rgb(18, 49, 6);
    20. }
    21.  
    22. .animatedLines .lines:nth-child(4) {
    23.    animation-delay: .4s;
    24.    background-color: rgb(18, 49, 6);
    25. }
    26.  
    27. .animatedLines .lines:nth-child(5) {
    28.    animation-delay: .3s;
    29.    background-color: rgb(18, 49, 6);
    30. }
    31.  
    32. .animatedLines .lines:nth-child(6) {
    33.    animation-delay: .2s;
    34.    background-color: rgb(127, 253, 69);
    35. }
    36.  
    37. .animatedLines .lines:nth-child(7) {
    38.    animation-delay: .1s;
    39.    background-color: rgb(102, 228, 43);
    40. }

     第 6 步 − 通过定位子“div”容器的类名来制作这些线条的动画。

    1. .animatedLines .lines {
    2.    list-style: none;
    3.    width: 5px;
    4.    height: 10px;
    5.    margin: 0 4px;
    6.    animation: animatedBars .5s infinite alternate;
    7. }
    8.  
    9. @keyframes animatedBars {
    10.    0% {
    11.       transform: scaleY(1);
    12.    }
    13.  
    14.    25% {
    15.        transform: scaleY(1);
    16.    }
    17.  
    18.    50% {
    19.        transform: scaleY(1);
    20.    }
    21.  
    22.    100% {
    23.        transform: scaleY(6);
    24.    }
    25.  
    26. }

     

    第 7 步− 动画条已成功创建。

    示例

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

    1. <html>
    2. <head>
    3.    <title>animated bars</title>
    4.    <link rel="stylesheet" href="style.css">
    5.    <style>
    6.       .animatedLines {
    7.          display: flex;
    8.          justify-content: center;
    9.          padding-top: 2rem;
    10.       }
    11.       .animatedLines .lines:nth-child(1) {
    12.          animation-delay: .1s;
    13.          background-color: rgb(141, 255, 88);
    14.       }
    15.       
    16.       .animatedLines .lines:nth-child(2) {
    17.          animation-delay: .2s;
    18.          background-color: rgb(127, 253, 69);
    19.       }
    20.       
    21.       .animatedLines .lines:nth-child(3) {
    22.          animation-delay: .3s;
    23.       
    24.          background-color: rgb(18, 49, 6);
    25.       }
    26.       
    27.       .animatedLines .lines:nth-child(4) {
    28.          animation-delay: .4s;
    29.          background-color: rgb(18, 49, 6);
    30.       }
    31.       
    32.       .animatedLines .lines:nth-child(5) {
    33.          animation-delay: .3s;
    34.          background-color: rgb(18, 49, 6);
    35.       }
    36.       
    37.       .animatedLines .lines:nth-child(6) {
    38.          animation-delay: .2s;
    39.          background-color: rgb(127, 253, 69);
    40.       }
    41.       
    42.       .animatedLines .lines:nth-child(7) {
    43.          animation-delay: .1s;
    44.          background-color: rgb(102, 228, 43);
    45.       }
    46.       .animatedLines .lines {
    47.          list-style: none;
    48.          width: 5px;
    49.          height: 10px;
    50.          margin: 0 4px;
    51.          animation: animatedBars .5s infinite alternate;
    52.       }
    53.       
    54.       @keyframes animatedBars {
    55.          0% {
    56.             transform: scaleY(1);
    57.          }
    58.       
    59.          25% {
    60.             transform: scaleY(1);
    61.          }
    62.       
    63.          50% {
    64.             transform: scaleY(1);
    65.          }
    66.       
    67.          100% {
    68.             transform: scaleY(6);
    69.          }
    70.       
    71.       }
    72.    </style>
    73. </head>
    74. <body>
    75.    <h1 style="text-align: center;text-decoration: underline;color: green;">tutorialspoint.com</h1>
    76.    <div class="animatedLines">
    77.       <div class="lines"></div>
    78.       <div class="lines"></div>
    79.       <div class="lines"></div>
    80.       <div class="lines"></div>
    81.       <div class="lines"></div>
    82.       <div class="lines"></div>
    83.       <div class="lines"></div>
    84.       <div class="lines"></div>
    85.    </div>
    86. </body>
    87. </html>

     

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

    结论

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

  • 相关阅读:
    JSR303是啥？有啥用处？
    为什么做短视频你的一直不爆？
    IDEA为什么不能搜索到jar里的代码？
    vite+react+typescript 遇到的问题
    谷歌年薪100万+的测试猿怎么写 python 代码？
    springboot自习室管理系统 小程序毕业设计源码221535
    博客变现的15种方式大盘点
    [附源码]Python计算机毕业设计SSM久宠宠物店管理系统（程序+LW)
    C++变量与基本类型
    （6）SpringCloud-Spring Boot项目详细搭建步骤
  • 原文地址：https://blog.csdn.net/lwf3115841/article/details/132656969