el-table表头高亮动画效果

el-table表头高亮动画效果

 <div class="front-table">
            <el-table
              :data="tableData"
              height="100%"
              stripe
              :header-cell-style="{
                backgroundColor: 'transparent',
                color: '#fff',
                fontWeight: 500
              }"
            >
              <div slot="empty" style="color: #fff;">
                暂无数据
              </div>
              <el-table-column prop="name" label="源"></el-table-column>
          </div>

// 采集平台深色表格样式
.front-table {
  margin-top: 5px;
  .el-table {
    background-color: rgba(28, 38, 97, 0.5);
    thead {
      background-image: url('~@/assets/img/front/light.png');//高亮的图片
      // background-size: 100% 100%;
      background-repeat: no-repeat;
      background-color: #094482;
      background-position-y: 22px;
      animation: theadBg 3s ease-in-out infinite;
      -webkit-animation: theadBg 3s ease-in-out infinite;
    }
    //闪烁动画
    @keyframes theadBg {
      0% {
        background-size: 80% 90%;
        background-position-y: 25px;
      }
      50% {
        background-size: 120% 100%;
        background-position-y: 22px;
      }
      55% {
        background-size: 121% 100%;
        background-position-y: 22px;
      }
      100% {
        background-size: 80% 90%;
        background-position-y: 25px;
      }
    }
    @-webkit-keyframes theadBg {
      0% {
        background-size: 100% 100%;
      }
      30% {
        background-size: 120% 110%;
      }
      65% {
        background-size: 80% 110%;
      }
      100% {
        background-size: 100% 100%;
      }
    }
    tr {
      background-color: transparent;
      color: #fff;
    }
    tr.el-table__row--striped td {
      background-color: #072d5a !important;
    }
    th.el-table__cell,
    td.el-table__cell {
      background-color: #002652;
      border: none;
    }
    th.el-table__cell.is-leaf {
      border: none;
    }
    .el-table__row {
      background-color: #eaeef8;
      border: none;
    }
    .el-table__row:hover>td {
      color: #63d5fa;
      background-color: #335b9e !important;
      cursor: default;
    }
    // 侧边栏展开时滚动条样式
    //滚动条
    ::-webkit-scrollbar {
      width: 4px;
      height: 5px;
    }
    /*滚动条里面小方块*/
    ::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background: #9ec2e67a;
    }
    /*滚动条里面轨道*/
    ::-webkit-scrollbar-track {
      border-radius: 3px;
      background: rgba(255, 255, 255, 0.01);
    }
  }
  .el-table::before {
    background-color: transparent;
  }
}