css三线箭头动图

// html
 <div class="packUp w bf t-c">
              <span class="upArrows">
                <b></b>
                <b></b>
              </span>
              收起
            </div>
            <div class="downUp w bf t-c">
              <span class="downArrows">
                <b></b>
                <b></b>
              </span>
              展开更多
            </div>
// css
.packUp {
        padding: .2rem 0 .2rem .2rem;
        font-size: 0.26rem;
        font-weight: 400;
        color: #4C85F8;
        line-height: 0.37rem;

        .upArrows {
          position: relative;
          >b {
            left: -.4rem;
            display: inline-block;
            position: absolute;
            height: .08rem;
            width: .08rem;
          }

          >b:nth-child(1) {
            animation: opcatyFir 1s 0s infinite;
            top:0.08rem;
            border-right: .06rem solid #4C85F8;
            border-top: .06rem solid #4C85F8;
            padding: .06rem;
            transform: rotate(-45deg);
          }

          >b:nth-child(2){
            animation: opcatySec 1s 0s infinite;
            top:.22rem;
            border-right: .06rem solid #4C85F8;
            border-top: .06rem solid #4C85F8;
            padding: .06rem;
            transform: rotate(-45deg);
            opacity: 0.5;
          }
        }
        @keyframes opcatyFir {
          0%{
            opacity: 1;
          }
          50%{
            opacity: 0.75;
          }
          100%{
            opacity: 0.5;
          }
        }
        @keyframes opcatySec {
          0%{
            opacity: 0.5;
          }
          50%{
            opacity: 0.75;
          }
          100%{
            opacity: 1;
          }
        }
      }
      .downUp {
        padding: .2rem 0 .2rem .2rem;
        font-size: 0.26rem;
        font-weight: 400;
        color: #4C85F8;
        line-height: 0.37rem;

        .downArrows {
          position: relative;
          >b {
            left: -.4rem;
            display: inline-block;
            position: absolute;
            height: .08rem;
            width: .08rem;
          }

          >b:nth-child(1) {
            animation: opcatyFir 1s 0s infinite;
            top:0;
            border-right: .06rem solid #4C85F8;
            border-top: .06rem solid #4C85F8;
            padding: .06rem;
            transform: rotate(-225deg);
            opacity: 0.5;
          }

          >b:nth-child(2){
            animation: opcatySec 1s 0s infinite;
            top:.16rem;
            border-right: .06rem solid #4C85F8;
            border-top: .06rem solid #4C85F8;
            padding: .06rem;
            transform: rotate(-225deg);
          }
        }
        @keyframes opcatyFir {
          0%{
            opacity: 0.5;
          }
          50%{
            opacity: 0.75;
          }
          100%{
            opacity: 1;
          }
        }
        @keyframes opcatySec {
          0%{
            opacity: 1;
          }
          50%{
            opacity: 0.75;
          }
          100%{
            opacity: 0.5;
          }
        }
      }
![image.png](https://img.haomeiwen.com/i13996371/a500b1ac48ec3822.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)