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

跳舞棒是用于制作美观网站的经典组件之一。它们实现起来非常简单，可以在录制声音时用作加载程序或动画。

方法：方法是使用无序列表来创建条形，然后使用关键帧对其进行动画处理。在继续阅读本文之前，您应该了解 CSS 的关键帧和第 n 个子属性。

HTML 代码：在本节中，我们创建了一个无序列表。

CSS 代码：对于 CSS，请按照以下步骤操作：

• 步骤 1：将 ul 与页面中心对齐。
• 第 2 步：删除列表的所有样式并应用一些宽度和高度以制作类似条形的形状。
• 第 3 步：使用关键帧沿 Y 轴设置条形动画。增加最后一帧的比例来做到这一点。
• 第 4 步：使用第 n 个子属性在每个 li 元素之间应用 .1s 延迟。

提示：您还可以通过使用 scaleX 并保持列表的默认排列在水平视图中进行相同的设计。

ul{
      position: absolute;
      top:50%;
      left:50%;
      display: flex;
    }
    ul li{
      list-style: none;
      width: 6px;
      height: 20px;
      background: #262626;
      margin: 0 4px;
      animation: animate .7s infinite alternate 
      }
      @keyframes animate {
        0%{
          transform: scaleY(1);
        }
         25%{
          transform: scaleY(1);
        }
         50%{
          transform: scaleY(1);
        }
         75%{
          transform: scaleY(1);
        }
         100%{
          transform: scaleY(3);
        }
          
      }
      ul li:nth-child(1){
        animation-delay: .1s;
      }
        
      ul li:nth-child(2){
        animation-delay: .2s;
      }
        
      ul li:nth-child(3){
        animation-delay: .3s;
      }
        
      ul li:nth-child(4){
        animation-delay: .4s;
      }
        
      ul li:nth-child(5){
        animation-delay: .5s;
      }
        
      ul li:nth-child(6){
        animation-delay: .6s;
      }

完整代码：是以上两段代码的组合。

输出：