cbsy/blxc-admin/target/classes/static/portal/css/text.css

.xiaoxun{
    margin-left: 1rem;
    display: flex;
    align-items: center;
    overflow: hidden;
    font-weight: bold;
    font-family: 'SourceHanSerifCN-Bold';
  }
  .xiaoxun img{
   width: 7.08rem;
  }
.xiaoxun .xxleft{
    /* color: #fff; */
    /* color: #ccc; */
    font-size: 1.72rem;
    display: inline-block;
    width: 1.72rem;
    transform: translateY(2rem);
    text-align: center;
    animation: shine 8s infinite;

    /* background:  rgba(255, 255, 255, 0.5) linear-gradient(to top, transparent, #ffffff, transparent) no-repeat 0 0; */
    background-size: 100% 30%;
    background-position: 0 0;
    background-clip: text;
    -webkit-background-clip: text;
    /* color: transparent; */
    color: #ffffff;
    filter: opacity(0);
    /* animation: sao 2s infinite; */
  }
  .xiaoxun .xxright{
    margin-left: 1.6rem;
    /* color: #fff; */
    font-size: 1.72rem;
    display: inline-block;
    width: 1.72rem;
    transform: translateY(-2rem);
    text-align: center;
    animation: shine1 8s infinite;

    /* background: rgba(255, 255, 255, 0.5) linear-gradient(to top, transparent, #ffffff, transparent) no-repeat 0 0; */
    background-size: 100% 30%;
    background-position: 0 0;
    background-clip: text;
    -webkit-background-clip: text;
    /* color: transparent; */
    color: #ffffff;
    filter: opacity(0);
  }
  .xiaoxun .xxxian{
    margin-left: 1.6rem;
    height: 26rem;
  }
  .xiaoxun .xxxian .up{
    height: 13rem;
    border-left: 0.12rem solid #fff;
    animation: shine2 8s infinite;
  }
  .xiaoxun .xxxian .down{
    height: 13rem;
    border-left: 0.12rem solid #fff;
    animation: shine3 8s infinite;
  }
  .hui{
    color:  rgba(255, 255, 255, 0.5) !important;
  }
  @keyframes shine {
      0% {
        transform: translateY(+150%);
        /* height: 0rem; */
        filter: opacity(1);
      }
      40% {
        transform: translateY(2rem);
        /* height: 4rem; */
        filter: opacity(1);
      }
      80% {
        transform: translateY(2rem);
        filter: opacity(1);
        /* height: 8rem; */
      }
      100% {
        transform: translateX(-100%);
        filter: opacity(0);
        /* height: 12rem; */
      }
}
@keyframes shine1 {
    0% {
        transform: translateY(-150%);
        filter: opacity(1);
      }
      40% {
        transform: translateY(-2rem);
        filter: opacity(1);
      }
      80% {
        transform: translateY(-2rem);
        filter: opacity(1);
      }
      100% {
        /* transform: translateY(-150%); */
        transform: translateX(+100%);
        filter: opacity(0);
      }
}
@keyframes shine2 {
    0% {
        transform: translateY(-150%);
        filter: opacity(1);
      }
      20% {
        transform: translateY(0%);
        filter: opacity(1);
      }
      80% {
        transform: translateY(0%);
        filter: opacity(1);
      }
      100% {
        /* transform: translateY(-150%); */
        filter: opacity(0);
      }
}
@keyframes shine3 {
     0% {
        transform: translateY(+150%);
        filter: opacity(1);
      }
      20% {
        transform: translateY(0%);
        filter: opacity(1);
      }
      80% {
        transform: translateY(0%);
        filter: opacity(1);
      }
      100% {
        /* transform: translateY(+150%); */
        filter: opacity(0);
      }
}
@keyframes sao {
    0% {
        background-position: 0% 0%;
    }
    /* 50% {
        background-position: 50% 50%;
    } */
    100% {
        background-position: 100% 100%;
    }
}
@keyframes sao1 {
    0% {
        background-position: 100% 100%;
    }
    /* 50% {
        background-position: 50% 50%;
    } */
    100% {
        background-position: 0% 0%;
    }
}