错落有致的动态美：CSS实现高度错开波动效果！

<div class="boxMain">
      <div class="boxItem"></div>
      <div class="boxItem"></div>
      <div class="boxItem"></div>
      <div class="boxItem"></div>
      <div class="boxItem"></div>
    </div>

.boxMain {
        width: 84px;
        height: 32px;
        margin:50px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
      }
      .boxItem {
        width: 6px;
        box-sizing: border-box;
        background-color: #97e138;
        animation: itemAnmiate 2s linear infinite;
        box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #97e138;
      }
      .boxItem:nth-of-type(2) {
        background-color: #0421b1;
        animation-delay: 0.3s;
        animation-duration: 2.0s;
        box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #0421b1;
      }
      .boxItem:nth-of-type(3) {
        background-color: #c00ee8;
        animation-delay: 0.38s;
        box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #c00ee8;
      }
      .boxItem:nth-of-type(4) {
        background-color: #eb2406;
        animation-delay: 0.5s;
        box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #eb2406;
      }
      .boxItem:nth-of-type(5) {
        background-color: #fff200;
        animation-duration: 2.4s;
        box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #fff200;
      }
      
      @keyframes itemAnmiate {
        0% {
          height: 0;
        }
        50% {
          height: 32px;
        }
        100% {
          height: 0;
        }
      }