数据大屏项目开发中，为了让页面更生动，或增加一些特效，这里我们使用css来实现从左到右的扫光效果。

html

<div class="body_center_top_list_item">
<div class="xg"></div> <h3>在制项目</h3>
</div>

css

@-webkit-keyframes shine {
  0% {
    background-position-x: 400%;
  }
  50% {
    background-position-x: 0%;
  }
  100% {
    background-position-x: -400%;
  }
}

@keyframes shine {
  0% {
    background-position-x: 400%;
  }
  50% {
    background-position-x: 0%;
  }
  100% {
    background-position-x: -400%;
  }
}
.body_center_top_list_item {
    background: url("../../images/night/center_top_bg.png");
    width: 140px;
    position: relative;
}
.xg {
      background: linear-gradient(
                      -45deg, rgba(17, 95, 185, 0) 50%, rgba(20, 131, 231, 1.00) 60%, rgba(17, 95, 185, 0) 70%);
      background-size: 600% 100%;
      height: 30px;
      width: 100%;
      animation: shine 20s infinite;
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
      -webkit-animation-timing-function: linear;
      animation-timing-function: linear;
      position: absolute;
      top: 7px;
      left: 0;
      z-index: 1;
    }