css三线箭头动图

// html
 

              
                
                
              
              收起
            
            

              
                
                
              
              展开更多
            
// 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://upload-images.jianshu.io/upload_images/13996371-a500b1ac48ec3822.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)